From 321cd6506828793d74adb9901850f8c9b68a06a7 Mon Sep 17 00:00:00 2001
From: Shewatipa Tseisi <shewatipa@chips.co.zw>
Date: Sun, 27 Sep 2026 14:29:27 +0200
Subject: [PATCH 1/7] feat: introduce new components and enhance existing demos

Added new components including StatCard, Chat, ButtonGroup, ToggleGroup, InputGroup, NumberInput, TreeView, Timeline, QrCode, ImageViewer, AspectRatio, and Kbd. Updated the ComplexComponentsDemo and created a NewComponentsDemo to showcase these additions. Enhanced the App layout with a new CSS link for charts and improved the command palette functionality. Updated Home and Components pages to reflect the new components and their usage.
---
 .../Components/App.razor                      |   1 +
 .../Demo/ComplexComponentsDemo.razor          |  79 +++--
 .../Components/Demo/NewComponentsDemo.razor   | 168 ++++++++++
 .../Components/Layout/MainLayout.razor        |  44 ++-
 .../Components/Pages/Components/Index.razor   |   5 +
 .../Pages/Components/NewComponents.razor      |  14 +
 .../Components/Pages/Home.razor               |   4 +
 .../Components/UI/AspectRatio.razor           |  15 +
 .../Components/UI/ButtonGroup.razor           |  18 ++
 .../Components/UI/Chart.razor                 |   2 -
 .../Components/UI/Chat.razor                  |  30 ++
 .../Components/UI/ChatInput.razor             |  94 ++++++
 .../Components/UI/ChatMessage.razor           |  65 ++++
 .../Components/UI/Command.razor               | 254 ++++++++-------
 .../Components/UI/CommandPalette.razor        |  18 +-
 .../Components/UI/DialogContent.razor         |  17 +-
 .../Components/UI/DrawerContent.razor         |  17 +-
 .../Components/UI/ImageViewer.razor           |  81 +++++
 .../Components/UI/InputGroup.razor            |  38 +++
 .../Components/UI/Kbd.razor                   |  10 +
 .../Components/UI/Loading.razor               | 293 +++++++++++++-----
 .../{ => UI}/Models/CommandModels.cs          |   2 +
 .../Components/UI/NumberInput.razor           |  67 ++++
 .../Components/UI/QrCode.razor                |  72 +++++
 .../Components/UI/RadarChart.razor            |   3 +-
 .../Components/UI/SheetContent.razor          |  17 +-
 .../Components/UI/SidebarProvider.razor       |  40 +--
 .../Components/UI/StatCard.razor              |  43 +++
 .../Components/UI/Timeline.razor              |  12 +
 .../Components/UI/TimelineItem.razor          |  39 +++
 .../Components/UI/ToggleGroup.razor           |  45 +++
 .../Components/UI/ToggleGroupItem.razor       |  37 +++
 .../Components/UI/TreeView.razor              |  28 ++
 .../Components/UI/TreeViewItem.razor          |  68 ++++
 .../Components/UI/Variants/ChartVariants.cs   |   4 +-
 .../Components/_Imports.razor                 |   2 +
 .../Components/AspectRatio.razor              |  15 +
 .../Components/ButtonGroup.razor              |  18 ++
 src/ShellUI.Components/Components/Chat.razor  |  30 ++
 .../Components/ChatInput.razor                |  94 ++++++
 .../Components/ChatMessage.razor              |  65 ++++
 .../Components/Command.razor                  | 254 ++++++++-------
 .../Components/CommandPalette.razor           |  18 +-
 .../Components/DialogContent.razor            |  17 +-
 .../Components/DrawerContent.razor            |  17 +-
 .../Components/ImageViewer.razor              |  81 +++++
 .../Components/InputGroup.razor               |  38 +++
 src/ShellUI.Components/Components/Kbd.razor   |  10 +
 .../Components/Loading.razor                  | 292 ++++++++++++-----
 .../Components/NumberInput.razor              |  67 ++++
 .../Components/QrCode.razor                   |  72 +++++
 .../Components/RadarChart.razor               |   3 +-
 .../Components/SheetContent.razor             |  17 +-
 .../Components/StatCard.razor                 |  43 +++
 .../Components/Timeline.razor                 |  12 +
 .../Components/TimelineItem.razor             |  39 +++
 .../Components/ToggleGroup.razor              |  45 +++
 .../Components/ToggleGroupItem.razor          |  37 +++
 .../Components/TreeView.razor                 |  28 ++
 .../Components/TreeViewItem.razor             |  68 ++++
 .../Models/CommandModels.cs                   |   1 +
 src/ShellUI.Components/README.md              |   2 +-
 .../ShellUI.Components.csproj                 |   1 +
 .../build/ShellUI.Components.targets          |  60 +++-
 .../wwwroot/shellui-classes.txt               |  60 +++-
 src/ShellUI.Components/wwwroot/shellui.js     |   5 +-
 66 files changed, 2758 insertions(+), 497 deletions(-)
 create mode 100644 NET10/BlazorInteractiveServer/Components/Demo/NewComponentsDemo.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/AspectRatio.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/ButtonGroup.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/Chat.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/ChatInput.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/ChatMessage.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/ImageViewer.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/InputGroup.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/Kbd.razor
 rename NET10/BlazorInteractiveServer/Components/{ => UI}/Models/CommandModels.cs (88%)
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/NumberInput.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/QrCode.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/StatCard.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/Timeline.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/TimelineItem.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/ToggleGroup.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/ToggleGroupItem.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/TreeView.razor
 create mode 100644 NET10/BlazorInteractiveServer/Components/UI/TreeViewItem.razor
 create mode 100644 src/ShellUI.Components/Components/AspectRatio.razor
 create mode 100644 src/ShellUI.Components/Components/ButtonGroup.razor
 create mode 100644 src/ShellUI.Components/Components/Chat.razor
 create mode 100644 src/ShellUI.Components/Components/ChatInput.razor
 create mode 100644 src/ShellUI.Components/Components/ChatMessage.razor
 create mode 100644 src/ShellUI.Components/Components/ImageViewer.razor
 create mode 100644 src/ShellUI.Components/Components/InputGroup.razor
 create mode 100644 src/ShellUI.Components/Components/Kbd.razor
 create mode 100644 src/ShellUI.Components/Components/NumberInput.razor
 create mode 100644 src/ShellUI.Components/Components/QrCode.razor
 create mode 100644 src/ShellUI.Components/Components/StatCard.razor
 create mode 100644 src/ShellUI.Components/Components/Timeline.razor
 create mode 100644 src/ShellUI.Components/Components/TimelineItem.razor
 create mode 100644 src/ShellUI.Components/Components/ToggleGroup.razor
 create mode 100644 src/ShellUI.Components/Components/ToggleGroupItem.razor
 create mode 100644 src/ShellUI.Components/Components/TreeView.razor
 create mode 100644 src/ShellUI.Components/Components/TreeViewItem.razor

diff --git a/NET10/BlazorInteractiveServer/Components/App.razor b/NET10/BlazorInteractiveServer/Components/App.razor
index b034cfb..7246aae 100644
--- a/NET10/BlazorInteractiveServer/Components/App.razor
+++ b/NET10/BlazorInteractiveServer/Components/App.razor
@@ -60,6 +60,7 @@
         #blazor-error-ui a { color: inherit; text-decoration: underline; }
         #blazor-error-ui .dismiss { cursor: pointer; margin-left: 1rem; }
     </style>
+    <link href="css/charts.css" rel="stylesheet" />
 </head>
 
 <body class="bg-background text-foreground">
diff --git a/NET10/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor b/NET10/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor
index 523bc50..5287ffb 100644
--- a/NET10/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor
+++ b/NET10/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor
@@ -41,47 +41,24 @@
         <!-- Loading Demo -->
         <div>
             <h3 class="text-xl font-semibold mb-2 text-card-foreground">Loading Components</h3>
-            <div class="flex flex-wrap gap-8 items-center">
-                <div class="text-center">
-                    <Loading Variant="spinner" Size="sm" />
-                    <p class="text-xs mt-2">Spinner SM</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="spinner" />
-                    <p class="text-xs mt-2">Spinner</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="dots" />
-                    <p class="text-xs mt-2">Dots</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="ring" />
-                    <p class="text-xs mt-2">Ring</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="pulse" />
-                    <p class="text-xs mt-2">Pulse</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="bars" />
-                    <p class="text-xs mt-2">Bars</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="bars-vertical" />
-                    <p class="text-xs mt-2">Bars Vertical</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="bars-pulse" />
-                    <p class="text-xs mt-2">Bars Pulse</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="grid" />
-                    <p class="text-xs mt-2">Grid</p>
-                </div>
-                <div class="text-center">
-                    <Loading Variant="orbit" />
-                    <p class="text-xs mt-2">Orbit</p>
-                </div>
+            <div class="grid grid-cols-3 gap-3 sm:grid-cols-5">
+                @foreach (var (variant, label) in _loadingVariants)
+                {
+                    <div class="flex h-24 flex-col items-center justify-between rounded-lg border border-border bg-background p-3">
+                        <div class="flex h-12 w-full items-center justify-center">
+                            <Loading Variant="@variant" Text="@(variant == "shimmer" ? "Thinking..." : null)" />
+                        </div>
+                        <p class="text-xs text-muted-foreground">@label</p>
+                    </div>
+                }
+            </div>
+            <div class="mt-4 flex flex-wrap items-center gap-6">
+                <Loading Variant="logo" Size="lg" />
+                <Loading Variant="rows" Size="lg" />
+                <Loading Variant="sequence" Size="lg" />
+                <Loading Variant="snake" Size="lg" />
+                <Loading Variant="ring" Size="lg" Class="text-emerald-500" />
+                <Loading Variant="wave" Class="text-muted-foreground" />
             </div>
         </div>
 
@@ -189,7 +166,12 @@
                 Title="No files found" 
                 Description="Get started by uploading your first file.">
                 <Action>
-                    <Button>Upload File</Button>
+                    <label for="empty-state-upload" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">Upload File</label>
+                    <InputFile id="empty-state-upload" class="hidden" OnChange="OnEmptyStateFileSelected" />
+                    @if (_emptyStateFile != null)
+                    {
+                        <p class="mt-2 text-sm text-muted-foreground">Selected: @_emptyStateFile</p>
+                    }
                 </Action>
             </EmptyState>
         </div>
@@ -374,6 +356,15 @@
 </section>
 
 @code {
+    private readonly (string Variant, string Label)[] _loadingVariants =
+    {
+        ("logo", "ShellUI Logo"), ("spinner", "Spinner"), ("ring", "Ring"), ("dual-ring", "Dual Ring"), ("activity", "Activity"), ("chase", "Chase"),
+        ("orbit", "Orbit"), ("ripple", "Ripple"), ("dots", "Dots"), ("typing", "Typing"), ("wave", "Wave"),
+        ("bars", "Bars"), ("bars-vertical", "Bars Vertical"), ("bars-pulse", "Bars Pulse"), ("grid", "Grid"), ("snake", "Snake"),
+        ("rows", "Rows"), ("columns", "Columns"), ("sequence", "Sequence"), ("twinkle", "Twinkle"), ("pulse", "Pulse"),
+        ("progress", "Progress"), ("shimmer", "Shimmer")
+    };
+
     private bool _showCommand = false;
     private bool _collapsibleOpen = false;
     private bool _stepperSubmitted = false;
@@ -437,6 +428,10 @@
         await ShowCommandChanged.InvokeAsync(value);
     }
 
+    private string? _emptyStateFile;
+
+    private void OnEmptyStateFileSelected(InputFileChangeEventArgs e) => _emptyStateFile = e.File.Name;
+
     private async Task HandleCommandSelected(CommandItem command)
     {
         await OnCommandSelected.InvokeAsync(command);
diff --git a/NET10/BlazorInteractiveServer/Components/Demo/NewComponentsDemo.razor b/NET10/BlazorInteractiveServer/Components/Demo/NewComponentsDemo.razor
new file mode 100644
index 0000000..dfc739c
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/Demo/NewComponentsDemo.razor
@@ -0,0 +1,168 @@
+<section class="border border-border rounded-lg p-6 bg-card">
+    <h2 class="text-2xl font-semibold mb-1 text-card-foreground">Stat Card</h2>
+    <p class="text-sm text-muted-foreground mb-4">KPI tiles with a trend badge.</p>
+    <div class="grid gap-4 sm:grid-cols-3">
+        <StatCard Title="Revenue" Value="$45,231" Change="+20.1%" Trend="up" Description="vs last month" />
+        <StatCard Title="Error rate" Value="0.42%" Change="-0.8%" Trend="down" Description="last 24 hours" />
+        <StatCard Title="Active users" Value="2,350" Description="right now" />
+    </div>
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-1 text-card-foreground">Chat</h2>
+    <p class="text-sm text-muted-foreground mb-4">Enter sends, Shift+Enter adds a new line. Replies are simulated.</p>
+    <Chat Height="380px">
+        <Header>
+            <div class="flex items-center justify-between">
+                <span class="text-sm font-medium text-foreground">Assistant</span>
+                <span class="text-xs text-muted-foreground">@_messages.Count messages</span>
+            </div>
+        </Header>
+        <ChildContent>
+            @foreach (var message in _messages)
+            {
+                <ChatMessage Role="@message.Role" Name="@(message.Role == "user" ? "You" : "ShellUI")" Text="@message.Text" />
+            }
+            @if (_thinking)
+            {
+                <ChatMessage Role="assistant" Name="ShellUI" IsStreaming="true" />
+            }
+        </ChildContent>
+        <Footer>
+            <ChatInput @bind-Value="_draft" OnSubmit="SendAsync" IsLoading="_thinking" />
+        </Footer>
+    </Chat>
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Toggle Group &amp; Button Group</h2>
+    <div class="space-y-4">
+        <div class="flex flex-wrap items-center gap-4">
+            <ToggleGroup @bind-Value="_align">
+                <ToggleGroupItem Value="left">Left</ToggleGroupItem>
+                <ToggleGroupItem Value="center">Center</ToggleGroupItem>
+                <ToggleGroupItem Value="right">Right</ToggleGroupItem>
+            </ToggleGroup>
+            <span class="text-sm text-muted-foreground">Single: @(_align ?? "none")</span>
+        </div>
+        <div class="flex flex-wrap items-center gap-4">
+            <ToggleGroup Multiple="true" @bind-Values="_formats">
+                <ToggleGroupItem Value="bold"><span class="font-bold">B</span></ToggleGroupItem>
+                <ToggleGroupItem Value="italic"><span class="italic">I</span></ToggleGroupItem>
+                <ToggleGroupItem Value="underline"><span class="underline">U</span></ToggleGroupItem>
+            </ToggleGroup>
+            <span class="text-sm text-muted-foreground">Multiple: @(_formats.Count == 0 ? "none" : string.Join(", ", _formats))</span>
+        </div>
+        <div class="flex flex-wrap items-start gap-6">
+            <ButtonGroup>
+                <Button Variant="ButtonVariant.Outline">Day</Button>
+                <Button Variant="ButtonVariant.Outline">Week</Button>
+                <Button Variant="ButtonVariant.Outline">Month</Button>
+            </ButtonGroup>
+            <ButtonGroup Orientation="vertical">
+                <Button Variant="ButtonVariant.Outline">Top</Button>
+                <Button Variant="ButtonVariant.Outline">Middle</Button>
+                <Button Variant="ButtonVariant.Outline">Bottom</Button>
+            </ButtonGroup>
+        </div>
+    </div>
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Input Group &amp; Number Input</h2>
+    <div class="grid gap-4 sm:grid-cols-2">
+        <div class="space-y-2">
+            <InputGroup @bind-Value="_website" Placeholder="example">
+                <Prefix>https://</Prefix>
+                <Suffix>.com</Suffix>
+            </InputGroup>
+            <InputGroup @bind-Value="_price" Placeholder="0.00" Type="number">
+                <Prefix>$</Prefix>
+                <Suffix>USD</Suffix>
+            </InputGroup>
+        </div>
+        <div class="space-y-2">
+            <NumberInput @bind-Value="_quantity" Min="0" Max="10" />
+            <p class="text-sm text-muted-foreground">Quantity: @_quantity (0 to 10)</p>
+        </div>
+    </div>
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Tree View &amp; Timeline</h2>
+    <div class="grid gap-8 sm:grid-cols-2">
+        <div>
+            <TreeView @bind-SelectedValue="_selectedFile">
+                <TreeViewItem Label="src" DefaultExpanded="true">
+                    <TreeViewItem Label="Components" DefaultExpanded="true">
+                        <TreeViewItem Label="Button.razor" />
+                        <TreeViewItem Label="Chat.razor" />
+                    </TreeViewItem>
+                    <TreeViewItem Label="Program.cs" />
+                </TreeViewItem>
+                <TreeViewItem Label="README.md" />
+            </TreeView>
+            <p class="mt-2 text-sm text-muted-foreground">Selected: @(_selectedFile ?? "none")</p>
+        </div>
+        <Timeline>
+            <TimelineItem Title="v0.3.0-rc.2 released" Time="Today" Active="true">Published to NuGet and GitHub.</TimelineItem>
+            <TimelineItem Title="Charts restyled" Time="2 weeks ago">Donut, radar and radial charts added.</TimelineItem>
+            <TimelineItem Title="Moved to .NET 10" Time="1 month ago" />
+        </Timeline>
+    </div>
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">QR Code, Image Viewer &amp; Aspect Ratio</h2>
+    <div class="grid items-start gap-6 sm:grid-cols-3">
+        <div class="space-y-2">
+            <QrCode Value="https://github.com/shellui-dev/shellui" Size="140" />
+            <p class="text-xs text-muted-foreground">Scan to open the repo</p>
+        </div>
+        <div class="space-y-2">
+            <ImageViewer Src="@SampleImage" Alt="Sample landscape" Class="h-32 w-full" />
+            <p class="text-xs text-muted-foreground">Click to open, then zoom</p>
+        </div>
+        <div class="space-y-2">
+            <AspectRatio Ratio="1.7777" Class="rounded-md bg-muted">
+                <div class="flex items-center justify-center text-sm text-muted-foreground">16 : 9</div>
+            </AspectRatio>
+            <p class="text-xs text-muted-foreground">Keeps its ratio at any width</p>
+        </div>
+    </div>
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Kbd</h2>
+    <p class="text-sm text-muted-foreground">
+        Open the command palette with <Kbd>Ctrl</Kbd> <Kbd>K</Kbd>, or toggle the sidebar with <Kbd>Ctrl</Kbd> <Kbd>B</Kbd>.
+    </p>
+</section>
+
+@code {
+    private readonly List<(string Role, string Text)> _messages = new()
+    {
+        ("assistant", "Hi! I'm a ShellUI chat demo. Ask me anything."),
+    };
+
+    private string? _draft;
+    private bool _thinking;
+    private string? _align = "center";
+    private List<string> _formats = new() { "bold" };
+    private string? _website;
+    private string? _price;
+    private decimal? _quantity = 1;
+    private string? _selectedFile = "Chat.razor";
+
+    private const string SampleImage = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2393c5fd'/><stop offset='1' stop-color='%23fde68a'/></linearGradient></defs><rect width='800' height='500' fill='url(%23s)'/><circle cx='620' cy='140' r='60' fill='%23fbbf24'/><path d='M0 380 L200 220 L360 360 L520 240 L800 400 L800 500 L0 500 Z' fill='%2334d399'/><path d='M0 430 L260 300 L460 440 L800 330 L800 500 L0 500 Z' fill='%23059669'/></svg>";
+
+    private async Task SendAsync(string text)
+    {
+        _messages.Add(("user", text));
+        _thinking = true;
+        StateHasChanged();
+        await Task.Delay(800);
+        _messages.Add(("assistant", $"You said:\n{text}"));
+        _thinking = false;
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/Layout/MainLayout.razor b/NET10/BlazorInteractiveServer/Components/Layout/MainLayout.razor
index 2c1a521..f92d8f8 100644
--- a/NET10/BlazorInteractiveServer/Components/Layout/MainLayout.razor
+++ b/NET10/BlazorInteractiveServer/Components/Layout/MainLayout.razor
@@ -4,7 +4,7 @@
 @using BlazorInteractiveServer.Components.Models
 @using BlazorInteractiveServer.Components.UI
 
-<div class="min-h-screen bg-background text-foreground" @onkeydown="HandleKeyDown" tabindex="0">
+<div class="min-h-screen bg-background text-foreground">
     <Navbar ClassName="flex items-center justify-center">
         <div class="flex items-center justify-center w-full px-5">
             <!-- Centered Content Group with Side Spacing -->
@@ -136,10 +136,9 @@
 <Sonner />
 
 <!-- Command Palette -->
-<Command IsOpen="_isCommandPaletteOpen" 
-         IsOpenChanged="OnCommandPaletteChanged" 
-         Commands="_commandItems"
-         CommandSelected="HandleCommandSelected" />
+<CommandPalette @bind-IsOpen="_isCommandPaletteOpen"
+                Commands="_commandItems"
+                CommandSelected="HandleCommandSelected" />
 
 @code {
     private bool _isMobileMenuOpen = false;
@@ -153,45 +152,52 @@
         {
             new CommandItem 
             { 
-                Title = "Home", 
+                Title = "Home",
+                Group = "Navigation", 
                 Description = "Go to homepage",
                 Shortcut = "Ctrl+H",
                 Action = async () => { NavigationManager.NavigateTo("/"); await Task.CompletedTask; }
             },
             new CommandItem 
             { 
-                Title = "Dashboard", 
+                Title = "Dashboard",
+                Group = "Navigation", 
                 Description = "View dashboard",
                 Shortcut = "Ctrl+D",
                 Action = async () => { NavigationManager.NavigateTo("/dashboard"); await Task.CompletedTask; }
             },
             new CommandItem 
             { 
-                Title = "Documentation", 
+                Title = "Documentation",
+                Group = "Resources", 
                 Description = "View ShellUI documentation",
                 Action = async () => { NavigationManager.NavigateTo("/docs"); await Task.CompletedTask; }
             },
             new CommandItem 
             { 
-                Title = "Blog", 
+                Title = "Blog",
+                Group = "Resources", 
                 Description = "Read our latest blog posts",
                 Action = async () => { NavigationManager.NavigateTo("/blog"); await Task.CompletedTask; }
             },
             new CommandItem 
             { 
-                Title = "Showcase", 
+                Title = "Showcase",
+                Group = "Community", 
                 Description = "See ShellUI in action",
                 Action = async () => { NavigationManager.NavigateTo("/showcase"); await Task.CompletedTask; }
             },
             new CommandItem 
             { 
-                Title = "Sponsors", 
+                Title = "Sponsors",
+                Group = "Community", 
                 Description = "Support ShellUI development",
                 Action = async () => { NavigationManager.NavigateTo("/sponsors"); await Task.CompletedTask; }
             },
             new CommandItem 
             { 
-                Title = "GitHub", 
+                Title = "GitHub",
+                Group = "Community", 
                 Description = "View source code on GitHub",
                 Action = async () => await JSRuntime.InvokeVoidAsync("ShellUI.openUrl", "https://github.com/shellui-dev/shellui", "_blank")
             }
@@ -213,10 +219,6 @@
         _isCommandPaletteOpen = true;
     }
 
-    private void OnCommandPaletteChanged(bool isOpen)
-    {
-        _isCommandPaletteOpen = isOpen;
-    }
 
     private async Task HandleCommandSelected(CommandItem command)
     {
@@ -226,14 +228,4 @@
             await command.Action();
         }
     }
-
-    private void HandleKeyDown(KeyboardEventArgs e)
-    {
-        // Ctrl+K to open command palette
-        if (e.CtrlKey && e.Key == "k")
-        {
-            _isCommandPaletteOpen = !_isCommandPaletteOpen;
-            StateHasChanged();
-        }
-    }
 }
\ No newline at end of file
diff --git a/NET10/BlazorInteractiveServer/Components/Pages/Components/Index.razor b/NET10/BlazorInteractiveServer/Components/Pages/Components/Index.razor
index 9d08cb4..23fff23 100644
--- a/NET10/BlazorInteractiveServer/Components/Pages/Components/Index.razor
+++ b/NET10/BlazorInteractiveServer/Components/Pages/Components/Index.razor
@@ -11,6 +11,11 @@
         <p class="text-muted-foreground mt-1">Browse ShellUI components with usage examples and variants.</p>
     </div>
 
+    <a href="/components/new" class="block rounded-lg border border-primary/40 bg-primary/5 p-6 transition-colors hover:bg-primary/10">
+        <h2 class="text-xl font-semibold text-foreground">New in 0.4 &rarr;</h2>
+        <p class="mt-1 text-sm text-muted-foreground">Chat, StatCard, TreeView, Timeline, ToggleGroup, ButtonGroup, InputGroup, NumberInput, QrCode, ImageViewer, AspectRatio and Kbd.</p>
+    </a>
+
     <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         <section class="rounded-lg border border-border bg-card p-6">
             <h2 class="text-xl font-semibold mb-4 text-card-foreground">Form</h2>
diff --git a/NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor b/NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor
new file mode 100644
index 0000000..b5ce4f4
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/Pages/Components/NewComponents.razor
@@ -0,0 +1,14 @@
+@page "/components/new"
+@layout BlazorInteractiveServer.Components.Layout.DashboardLayout
+@rendermode InteractiveServer
+@using BlazorInteractiveServer.Components.Demo
+
+<PageTitle>New in 0.4 | ShellUI</PageTitle>
+
+<div class="space-y-6">
+    <div>
+        <h1 class="text-3xl font-bold text-foreground">New in 0.4</h1>
+        <p class="text-muted-foreground mt-1">Kbd, AspectRatio, ButtonGroup, ToggleGroup, InputGroup, NumberInput, StatCard, Timeline, TreeView, QrCode, ImageViewer and Chat.</p>
+    </div>
+    <NewComponentsDemo />
+</div>
diff --git a/NET10/BlazorInteractiveServer/Components/Pages/Home.razor b/NET10/BlazorInteractiveServer/Components/Pages/Home.razor
index c0ede4d..27f9da2 100644
--- a/NET10/BlazorInteractiveServer/Components/Pages/Home.razor
+++ b/NET10/BlazorInteractiveServer/Components/Pages/Home.razor
@@ -27,6 +27,10 @@
     </div>
 
     <div class="space-y-8">
+        <div>
+            <h2 class="text-xl sm:text-2xl font-bold mb-4 text-foreground">New in 0.4</h2>
+            <NewComponentsDemo />
+        </div>
         <ButtonsDemo />
         <FormsDemo />
         <CardsAlertsDemo />
diff --git a/NET10/BlazorInteractiveServer/Components/UI/AspectRatio.razor b/NET10/BlazorInteractiveServer/Components/UI/AspectRatio.razor
new file mode 100644
index 0000000..02a289b
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/AspectRatio.razor
@@ -0,0 +1,15 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<div class="@Shell.Cn("relative w-full overflow-hidden [&>*]:absolute [&>*]:inset-0 [&>*]:h-full [&>*]:w-full", Class)" style="aspect-ratio: @RatioCss" @attributes="AdditionalAttributes">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public double Ratio { get; set; } = 16d / 9d;
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string RatioCss => Ratio.ToString(System.Globalization.CultureInfo.InvariantCulture);
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/ButtonGroup.razor b/NET10/BlazorInteractiveServer/Components/UI/ButtonGroup.razor
new file mode 100644
index 0000000..1d5967e
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/ButtonGroup.razor
@@ -0,0 +1,18 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<div role="group" class="@Shell.Cn("inline-flex", IsVertical ? VerticalClass : HorizontalClass, Class)" @attributes="AdditionalAttributes">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public string Orientation { get; set; } = "horizontal";
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsVertical => string.Equals(Orientation, "vertical", StringComparison.OrdinalIgnoreCase);
+
+    private const string HorizontalClass = "flex-row [&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px [&>*]:focus-visible:z-10";
+    private const string VerticalClass = "flex-col [&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px [&>*]:focus-visible:z-10";
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Chart.razor b/NET10/BlazorInteractiveServer/Components/UI/Chart.razor
index d49df32..0faff4c 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Chart.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Chart.razor
@@ -20,9 +20,7 @@
     [Parameter] public string? Class { get; set; }
     [Parameter] public string? Height { get; set; } = "400px";
     [Parameter] public string? Width { get; set; } = "100%";
-    /// Show ApexCharts' zoom/pan/download toolbar. Off by default (shadcn aesthetic).
     [Parameter] public bool ShowToolbar { get; set; }
-    /// Show the series legend. Defaults to true; set false on single-series charts for a cleaner look.
     [Parameter] public bool ShowLegend { get; set; } = true;
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Chat.razor b/NET10/BlazorInteractiveServer/Components/UI/Chat.razor
new file mode 100644
index 0000000..012a3e0
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/Chat.razor
@@ -0,0 +1,30 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<div class="@Shell.Cn("flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background", Class)"
+     style="@(Height != null ? $"height: {Height}" : null)"
+     @attributes="AdditionalAttributes">
+    @if (Header != null)
+    {
+        <div class="shrink-0 border-b border-border px-4 py-3">@Header</div>
+    }
+    @* column-reverse keeps the scroll anchored to the newest message without JS *@
+    <div class="flex min-h-0 flex-1 flex-col-reverse overflow-y-auto p-4" role="log" aria-live="polite">
+        <div class="flex flex-col gap-4">
+            @ChildContent
+        </div>
+    </div>
+    @if (Footer != null)
+    {
+        <div class="shrink-0 border-t border-border p-3">@Footer</div>
+    }
+</div>
+
+@code {
+    [Parameter] public string? Height { get; set; }
+    [Parameter] public RenderFragment? Header { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public RenderFragment? Footer { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/ChatInput.razor b/NET10/BlazorInteractiveServer/Components/UI/ChatInput.razor
new file mode 100644
index 0000000..34eb126
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/ChatInput.razor
@@ -0,0 +1,94 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<form @onsubmit="SubmitAsync"
+      class="@Shell.Cn("flex w-full items-end gap-2 rounded-lg border border-input bg-background p-2 ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", Class)"
+      @attributes="AdditionalAttributes">
+    @if (Actions != null)
+    {
+        <div class="flex shrink-0 items-center gap-1 pb-0.5">@Actions</div>
+    }
+    <textarea @key="_inputKey"
+              @ref="_textarea"
+              rows="@Rows"
+              value="@Value"
+              placeholder="@Placeholder"
+              aria-label="@Placeholder"
+              disabled="@Disabled"
+              @oninput="HandleInputAsync"
+              @onkeydown="HandleKeyDownAsync"
+              class="max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2 py-2 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"></textarea>
+    <button type="submit" aria-label="Send" disabled="@(!CanSubmit)"
+            class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50">
+        @if (IsLoading)
+        {
+            <svg class="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+            </svg>
+        }
+        else
+        {
+            <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 12h14M12 5l7 7-7 7" />
+            </svg>
+        }
+    </button>
+</form>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public EventCallback<string> OnSubmit { get; set; }
+    [Parameter] public string Placeholder { get; set; } = "Send a message...";
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public bool IsLoading { get; set; }
+    [Parameter] public int Rows { get; set; } = 1;
+    [Parameter] public RenderFragment? Actions { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private ElementReference _textarea;
+    private int _inputKey;
+    private bool _ignoreNextInput;
+    private bool _refocus;
+
+    private bool CanSubmit => !Disabled && !IsLoading && !string.IsNullOrWhiteSpace(Value);
+
+    // Enter sends; the browser's newline still arrives as the next input event, so it is dropped and the textarea re-created.
+    private async Task HandleKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key != "Enter" || e.ShiftKey) return;
+        _ignoreNextInput = true;
+        await SubmitAsync();
+    }
+
+    private async Task HandleInputAsync(ChangeEventArgs e)
+    {
+        if (_ignoreNextInput)
+        {
+            _ignoreNextInput = false;
+            _inputKey++;
+            _refocus = true;
+            return;
+        }
+        Value = e.Value?.ToString();
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private async Task SubmitAsync()
+    {
+        if (!CanSubmit) return;
+        var text = Value!.Trim();
+        Value = "";
+        await ValueChanged.InvokeAsync(Value);
+        await OnSubmit.InvokeAsync(text);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_refocus) return;
+        _refocus = false;
+        await _textarea.FocusAsync();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/ChatMessage.razor b/NET10/BlazorInteractiveServer/Components/UI/ChatMessage.razor
new file mode 100644
index 0000000..d27817d
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/ChatMessage.razor
@@ -0,0 +1,65 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<div class="@Shell.Cn("flex w-full gap-3", IsUser ? "flex-row-reverse" : "flex-row", Class)" @attributes="AdditionalAttributes">
+    @if (Avatar != null)
+    {
+        <div class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-medium">@Avatar</div>
+    }
+    <div class="@Shell.Cn("flex max-w-[80%] flex-col gap-1", IsUser ? "items-end" : "items-start")">
+        @if (!string.IsNullOrEmpty(Name) || !string.IsNullOrEmpty(Timestamp))
+        {
+            <div class="flex items-center gap-2 text-xs text-muted-foreground">
+                @if (!string.IsNullOrEmpty(Name))
+                {
+                    <span class="font-medium text-foreground">@Name</span>
+                }
+                @if (!string.IsNullOrEmpty(Timestamp))
+                {
+                    <span>@Timestamp</span>
+                }
+            </div>
+        }
+        <div class="@Shell.Cn("break-words rounded-lg px-3 py-2 text-sm leading-relaxed", BubbleClass)">
+            @if (Text != null)
+            {
+                <span class="whitespace-pre-line">@Text</span>
+            }
+            @ChildContent
+            @if (IsStreaming)
+            {
+                <span class="ml-1 inline-flex items-center gap-0.5 align-middle" aria-label="Typing">
+                    <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.3s]"></span>
+                    <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.15s]"></span>
+                    <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-current"></span>
+                </span>
+            }
+        </div>
+        @if (Actions != null)
+        {
+            <div class="flex items-center gap-1 text-muted-foreground">@Actions</div>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Role { get; set; } = "assistant";
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public string? Name { get; set; }
+    [Parameter] public string? Timestamp { get; set; }
+    [Parameter] public bool IsStreaming { get; set; }
+    [Parameter] public RenderFragment? Avatar { get; set; }
+    [Parameter] public RenderFragment? Actions { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsUser => string.Equals(Role, "user", StringComparison.OrdinalIgnoreCase);
+
+    private string BubbleClass => Role.ToLowerInvariant() switch
+    {
+        "user" => "bg-primary text-primary-foreground",
+        "system" => "border border-border bg-background italic text-muted-foreground",
+        _ => "bg-muted text-foreground"
+    };
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Command.razor b/NET10/BlazorInteractiveServer/Components/UI/Command.razor
index 0fa7813..ed81025 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Command.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Command.razor
@@ -1,172 +1,198 @@
-@using Microsoft.JSInterop
 @using BlazorInteractiveServer.Components.Models
 
-<Dialog Open="IsOpen" OpenChanged="HandleOpenChanged">
-    <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-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" />
+@if (IsOpen)
+{
+    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity duration-150 starting:opacity-0" @onclick="CloseAsync"></div>
+    <div role="dialog" aria-modal="true" aria-label="Command menu"
+         class="fixed left-1/2 top-[15vh] z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl transition duration-150 ease-out starting:scale-95 starting:opacity-0">
+        <div class="flex items-center gap-3 border-b border-border px-4">
+            <svg class="h-4 w-4 shrink-0 text-muted-foreground" 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-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z" />
             </svg>
-            <input
-                @ref="_searchInput"
-                @bind-value="_searchQuery"
-                @bind-value:event="oninput"
-                @onkeydown="OnKeyDown"
-                type="text"
-                placeholder="@Placeholder"
-                class="flex h-10 w-full rounded-md bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" />
+            <input @ref="_input"
+                   value="@_query"
+                   @oninput="OnInput"
+                   @onkeydown="OnKeyDownAsync"
+                   type="text"
+                   role="combobox"
+                   aria-expanded="true"
+                   aria-controls="@_listId"
+                   aria-activedescendant="@(_filtered.Count > 0 ? ItemId(_active) : null)"
+                   autocomplete="off"
+                   spellcheck="false"
+                   placeholder="@Placeholder"
+                   class="h-12 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+            <kbd class="hidden h-5 shrink-0 items-center rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex">Esc</kbd>
         </div>
 
-        <!-- Results -->
-        <div class="max-h-[300px] overflow-y-auto p-2">
-            @if (_filteredCommands.Any())
+        <div id="@_listId" role="listbox" class="max-h-[min(360px,55vh)] overflow-y-auto overscroll-contain p-1.5">
+            @if (_filtered.Count == 0)
             {
-                @foreach (var command in _filteredCommands)
+                <p class="py-10 text-center text-sm text-muted-foreground">No results for "@_query"</p>
+            }
+            else
+            {
+                string? group = null;
+                for (var i = 0; i < _filtered.Count; i++)
                 {
-                    <button
-                        @onclick="() => SelectCommand(command)"
-                        class="flex w-full items-center rounded-md px-2 py-2 text-sm text-left hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none">
+                    var index = i;
+                    var command = _filtered[i];
+                    if (!string.IsNullOrEmpty(command.Group) && command.Group != group)
+                    {
+                        group = command.Group;
+                        <div class="px-2.5 pb-1 pt-3 text-xs font-medium text-muted-foreground first:pt-1.5">@group</div>
+                    }
+                    <div id="@ItemId(index)"
+                         @ref="_itemRefs[index]"
+                         role="option"
+                         tabindex="-1"
+                         aria-selected="@(index == _active ? "true" : "false")"
+                         @onclick="() => SelectAsync(command)"
+                         @onmousemove="() => SetActive(index)"
+                         class="@Shell.Cn("flex cursor-pointer select-none items-center gap-3 rounded-lg px-2.5 py-2 text-sm outline-none", index == _active ? "bg-accent text-accent-foreground" : "text-foreground")">
                         @if (!string.IsNullOrEmpty(command.Icon))
                         {
-                            <div class="mr-3 flex h-4 w-4 items-center justify-center text-muted-foreground">
-                                @((MarkupString)command.Icon)
-                            </div>
+                            <span class="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4">@((MarkupString)command.Icon)</span>
                         }
-                        <div class="flex-1">
-                            <div class="font-medium text-foreground">@command.Title</div>
+                        <div class="min-w-0 flex-1">
+                            <div class="truncate font-medium">@command.Title</div>
                             @if (!string.IsNullOrEmpty(command.Description))
                             {
-                                <div class="text-xs text-muted-foreground">@command.Description</div>
+                                <div class="truncate text-xs text-muted-foreground">@command.Description</div>
                             }
                         </div>
                         @if (!string.IsNullOrEmpty(command.Shortcut))
                         {
-                            <div class="ml-3 flex items-center gap-0.5">
+                            <span class="ml-auto flex shrink-0 items-center gap-1">
                                 @foreach (var key in command.Shortcut.Split('+'))
                                 {
-                                    <kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
-                                        <span class="text-xs">@key</span>
-                                    </kbd>
+                                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1 font-mono text-[10px] font-medium text-muted-foreground">@key</kbd>
                                 }
-                            </div>
+                            </span>
                         }
-                    </button>
+                    </div>
                 }
             }
-            else
-            {
-                <div class="p-6 text-center text-sm text-muted-foreground">
-                    No results found.
-                </div>
-            }
         </div>
-    </DialogContent>
-</Dialog>
-
-@code {
-    [Parameter]
-    public bool IsOpen { get; set; }
 
-    [Parameter]
-    public string Placeholder { get; set; } = "Type a command or search...";
-
-    [Parameter]
-    public List<CommandItem> Commands { get; set; } = new();
+        <div class="flex items-center gap-4 border-t border-border bg-muted/40 px-4 py-2 text-xs text-muted-foreground">
+            <span class="flex items-center gap-1">
+                <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]">&uarr;</kbd>
+                <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]">&darr;</kbd>
+                Navigate
+            </span>
+            <span class="flex items-center gap-1">
+                <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]">&crarr;</kbd>
+                Select
+            </span>
+            <span class="ml-auto tabular-nums">@_filtered.Count @(_filtered.Count == 1 ? "result" : "results")</span>
+        </div>
+    </div>
+}
 
-    [Parameter]
-    public EventCallback<bool> IsOpenChanged { get; set; }
+@code {
+    [Parameter] public bool IsOpen { get; set; }
+    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
+    [Parameter] public List<CommandItem> Commands { get; set; } = new();
+    [Parameter] public EventCallback<CommandItem> CommandSelected { get; set; }
+    [Parameter] public string Placeholder { get; set; } = "Type a command or search...";
 
-    [Parameter]
-    public EventCallback<CommandItem> CommandSelected { get; set; }
+    private readonly string _listId = $"command-list-{Guid.NewGuid():N}";
+    private readonly Dictionary<int, ElementReference> _itemRefs = new();
+    private ElementReference _input;
+    private List<CommandItem> _filtered = new();
+    private string _query = "";
+    private int _active;
+    private bool _wasOpen;
+    private bool _focusInput;
+    private bool _scrollToActive;
 
-    private string _searchQuery = "";
-    private List<CommandItem> _filteredCommands = new();
-    private ElementReference _searchInput;
-    private bool _shouldFocus;
+    private string ItemId(int index) => $"{_listId}-{index}";
 
     protected override void OnParametersSet()
     {
-        UpdateFilteredCommands();
-        if (IsOpen)
+        if (IsOpen && !_wasOpen)
         {
-            _shouldFocus = true;
+            _query = "";
+            _active = 0;
+            _focusInput = true;
         }
+        _wasOpen = IsOpen;
+        Filter();
     }
 
-    private void UpdateFilteredCommands()
+    private void OnInput(ChangeEventArgs e)
     {
-        if (string.IsNullOrWhiteSpace(_searchQuery))
-        {
-            _filteredCommands = Commands.ToList();
-        }
-        else
-        {
-            _filteredCommands = Commands
-                .Where(c =>
-                    c.Title.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) ||
-                    (c.Description?.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) == true))
+        _query = e.Value?.ToString() ?? "";
+        _active = 0;
+        Filter();
+    }
+
+    private void Filter()
+    {
+        var query = _query.Trim();
+        _filtered = query.Length == 0
+            ? Commands.ToList()
+            : Commands
+                .Where(c => c.Title.Contains(query, StringComparison.OrdinalIgnoreCase)
+                    || c.Description?.Contains(query, StringComparison.OrdinalIgnoreCase) == true
+                    || c.Group?.Contains(query, StringComparison.OrdinalIgnoreCase) == true)
+                .OrderBy(c => c.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0 : 1)
                 .ToList();
-        }
+        if (_active >= _filtered.Count) _active = Math.Max(0, _filtered.Count - 1);
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    private void SetActive(int index) => _active = index;
+
+    private void Move(int index)
+    {
+        if (_filtered.Count == 0) return;
+        _active = (index + _filtered.Count) % _filtered.Count;
+        _scrollToActive = true;
+    }
+
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
     {
-        if (_shouldFocus)
+        switch (e.Key)
         {
-            _shouldFocus = false;
-            try
-            {
-                await _searchInput.FocusAsync();
-            }
-            catch { }
+            case "ArrowDown": Move(_active + 1); break;
+            case "ArrowUp": Move(_active - 1); break;
+            case "Home": Move(0); break;
+            case "End": Move(_filtered.Count - 1); break;
+            case "Enter":
+                if (_filtered.Count > 0) await SelectAsync(_filtered[_active]);
+                break;
+            case "Escape": await CloseAsync(); break;
         }
     }
 
-    private async Task SelectCommand(CommandItem command)
+    private async Task SelectAsync(CommandItem command)
     {
+        await CloseAsync();
         await CommandSelected.InvokeAsync(command);
-        await CloseCommand();
     }
 
-    private async Task CloseCommand()
+    private async Task CloseAsync()
     {
         IsOpen = false;
-        _searchQuery = "";
-        await IsOpenChanged.InvokeAsync(IsOpen);
-    }
-    
-    private async Task HandleOpenChanged(bool isOpen)
-    {
-        if (!isOpen)
-        {
-            await CloseCommand();
-        }
-        else 
-        {
-             IsOpen = isOpen;
-             await IsOpenChanged.InvokeAsync(isOpen);
-        }
+        _wasOpen = false;
+        await IsOpenChanged.InvokeAsync(false);
     }
 
-    private async Task OnKeyDown(KeyboardEventArgs e)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (e.Key == "Escape")
+        if (!IsOpen) return;
+        if (_focusInput)
         {
-            await CloseCommand();
+            _focusInput = false;
+            await _input.FocusAsync();
         }
-        else if (e.Key == "Enter" && _filteredCommands.Any())
+        if (_scrollToActive && _itemRefs.TryGetValue(_active, out var item))
         {
-            await SelectCommand(_filteredCommands.First());
-        }
-        else if (e.Key == "ArrowDown" && _filteredCommands.Count > 1)
-        {
-            // Could implement keyboard navigation here
-        }
-        else if (e.Key == "ArrowUp" && _filteredCommands.Count > 1)
-        {
-            // Could implement keyboard navigation here
+            // Focusing the row scrolls it into view without custom JS; focus then returns to the input.
+            _scrollToActive = false;
+            await item.FocusAsync(preventScroll: false);
+            await _input.FocusAsync(preventScroll: true);
         }
     }
 }
-
diff --git a/NET10/BlazorInteractiveServer/Components/UI/CommandPalette.razor b/NET10/BlazorInteractiveServer/Components/UI/CommandPalette.razor
index c6126c7..67b9356 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/CommandPalette.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/CommandPalette.razor
@@ -20,10 +20,20 @@
     [Parameter] public bool UseMeta { get; set; } = true;
     [Parameter] public bool UseShift { get; set; }
     [Parameter] public bool UseAlt { get; set; }
+    [Parameter] public bool IsOpen { get; set; }
+    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
 
     private bool _isOpen;
     private DotNetObjectReference<CommandPalette>? _selfRef;
     private readonly string _handle = Guid.NewGuid().ToString("N");
+    private bool _lastIsOpen;
+
+    protected override void OnParametersSet()
+    {
+        if (IsOpen == _lastIsOpen) return;
+        _lastIsOpen = IsOpen;
+        _isOpen = IsOpen;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -37,17 +47,17 @@
     }
 
     [JSInvokable]
-    public Task OnShortcut()
+    public async Task OnShortcut()
     {
         _isOpen = !_isOpen;
+        await IsOpenChanged.InvokeAsync(_isOpen);
         StateHasChanged();
-        return Task.CompletedTask;
     }
 
-    private Task OnIsOpenChanged(bool open)
+    private async Task OnIsOpenChanged(bool open)
     {
         _isOpen = open;
-        return Task.CompletedTask;
+        await IsOpenChanged.InvokeAsync(open);
     }
 
     private async Task OnCommandSelected(CommandItem item)
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor b/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
index ca643c5..fe5b4b5 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
@@ -6,7 +6,7 @@
 @if (Dialog?.Open == true)
 {
     <div class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" @onclick="Close"></div>
-    <div class="@Shell.Cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", Class)" @attributes="AdditionalAttributes">
+    <div @ref="_content" tabindex="-1" role="dialog" aria-modal="true" @onkeydown="OnKeyDownAsync" class="@Shell.Cn("outline-none fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", Class)" @attributes="AdditionalAttributes">
         @ChildContent
         <button type="button" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" @onclick="Close">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
@@ -23,6 +23,8 @@
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
@@ -32,8 +34,21 @@
         }
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Dialog?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Dialog?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor b/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
index 206fae0..27fe222 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
@@ -6,7 +6,7 @@
 @if (Parent?.Open == true)
 {
     <div class="fixed inset-0 z-50 bg-black/80 animate-in fade-in-0" @onclick="Close"></div>
-    <div class="@DrawerVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
+    <div @ref="_content" tabindex="-1" role="dialog" aria-modal="true" @onkeydown="OnKeyDownAsync" class="outline-none @DrawerVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
         <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
         <div class="flex flex-col gap-4 p-4">
             @ChildContent
@@ -22,14 +22,29 @@
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Parent?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Parent?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/NET10/BlazorInteractiveServer/Components/UI/ImageViewer.razor b/NET10/BlazorInteractiveServer/Components/UI/ImageViewer.razor
new file mode 100644
index 0000000..060a52a
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/ImageViewer.razor
@@ -0,0 +1,81 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using System.Globalization
+
+<button type="button" @onclick="Open" aria-label="@($"View {Alt}")"
+        class="@Shell.Cn("group relative block overflow-hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", Class)">
+    <img src="@(ThumbnailSrc ?? Src)" alt="@Alt" loading="lazy"
+         class="@Shell.Cn("h-full w-full object-cover transition-transform duration-200 group-hover:scale-105", ImageClass)"
+         @attributes="AdditionalAttributes" />
+</button>
+
+@if (_open)
+{
+    <div @ref="_overlay" tabindex="-1" role="dialog" aria-modal="true" aria-label="@Alt"
+         @onkeydown="HandleKeyDown" @onclick="Close"
+         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 outline-none">
+        <div class="absolute right-4 top-4 flex gap-2" @onclick:stopPropagation="true">
+            <button type="button" aria-label="Zoom out" disabled="@(_scale <= MinScale)" @onclick="ZoomOut" class="@ControlClass">
+                <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 12h14" /></svg>
+            </button>
+            <button type="button" aria-label="Reset zoom" @onclick="ResetZoom" class="@Shell.Cn(ControlClass, "w-auto px-2 text-xs tabular-nums")">@($"{_scale * 100:0}%")</button>
+            <button type="button" aria-label="Zoom in" disabled="@(_scale >= MaxScale)" @onclick="ZoomIn" class="@ControlClass">
+                <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="M12 5v14M5 12h14" /></svg>
+            </button>
+            <button type="button" aria-label="Close" @onclick="Close" class="@ControlClass">
+                <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="M6 18L18 6M6 6l12 12" /></svg>
+            </button>
+        </div>
+        <img src="@Src" alt="@Alt" @onclick:stopPropagation="true"
+             style="transform: scale(@_scale.ToString(CultureInfo.InvariantCulture))"
+             class="max-h-[90vh] max-w-[90vw] select-none object-contain transition-transform duration-200" />
+    </div>
+}
+
+@code {
+    [Parameter] public string Src { get; set; } = "";
+    [Parameter] public string? ThumbnailSrc { get; set; }
+    [Parameter] public string Alt { get; set; } = "";
+    [Parameter] public string? ImageClass { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private const double MinScale = 0.5;
+    private const double MaxScale = 4;
+    private const string ControlClass = "inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/10 text-white transition-colors hover:bg-white/20 disabled:pointer-events-none disabled:opacity-40";
+
+    private ElementReference _overlay;
+    private bool _open;
+    private bool _focusPending;
+    private double _scale = 1;
+
+    private void Open()
+    {
+        _open = true;
+        _scale = 1;
+        _focusPending = true;
+    }
+
+    private void Close() => _open = false;
+    private void ZoomIn() => _scale = Math.Min(MaxScale, _scale + 0.25);
+    private void ZoomOut() => _scale = Math.Max(MinScale, _scale - 0.25);
+    private void ResetZoom() => _scale = 1;
+
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape": Close(); break;
+            case "+": case "=": ZoomIn(); break;
+            case "-": ZoomOut(); break;
+            case "0": ResetZoom(); break;
+        }
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_focusPending) return;
+        _focusPending = false;
+        await _overlay.FocusAsync();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/InputGroup.razor b/NET10/BlazorInteractiveServer/Components/UI/InputGroup.razor
new file mode 100644
index 0000000..15da393
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/InputGroup.razor
@@ -0,0 +1,38 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<div class="@Shell.Cn("flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", Disabled ? "cursor-not-allowed opacity-50" : "", Class)">
+    @if (Prefix != null)
+    {
+        <span class="flex shrink-0 items-center pl-3 text-muted-foreground [&>svg]:size-4">@Prefix</span>
+    }
+    <input type="@Type"
+           value="@Value"
+           placeholder="@Placeholder"
+           disabled="@Disabled"
+           @oninput="HandleInput"
+           class="h-full min-w-0 flex-1 bg-transparent px-3 py-2 placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+           @attributes="AdditionalAttributes" />
+    @if (Suffix != null)
+    {
+        <span class="flex shrink-0 items-center pr-3 text-muted-foreground [&>svg]:size-4">@Suffix</span>
+    }
+</div>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public string Type { get; set; } = "text";
+    [Parameter] public string? Placeholder { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? Prefix { get; set; }
+    [Parameter] public RenderFragment? Suffix { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private async Task HandleInput(ChangeEventArgs e)
+    {
+        Value = e.Value?.ToString();
+        await ValueChanged.InvokeAsync(Value);
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Kbd.razor b/NET10/BlazorInteractiveServer/Components/UI/Kbd.razor
new file mode 100644
index 0000000..a8998de
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/Kbd.razor
@@ -0,0 +1,10 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<kbd class="@Shell.Cn("pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium text-muted-foreground", Class)" @attributes="AdditionalAttributes">@ChildContent</kbd>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Loading.razor b/NET10/BlazorInteractiveServer/Components/UI/Loading.razor
index 240ce81..1cedc55 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Loading.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Loading.razor
@@ -1,80 +1,227 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using System.Globalization
 
-@if (Variant == "spinner")
-{
-    <div class="@Shell.Cn("animate-spin rounded-full border-2 border-muted border-t-primary", Size == "sm" ? "h-4 w-4" : Size == "lg" ? "h-8 w-8" : "h-6 w-6", Class)"></div>
-}
-else if (Variant == "dots")
-{
-    <div class="flex space-x-1">
-        <div class="@Shell.Cn("animate-bounce rounded-full bg-primary", Size == "sm" ? "h-2 w-2" : Size == "lg" ? "h-4 w-4" : "h-3 w-3", Class)" style="animation: bounce 1s infinite; animation-delay: 0ms;"></div>
-        <div class="@Shell.Cn("animate-bounce rounded-full bg-primary", Size == "sm" ? "h-2 w-2" : Size == "lg" ? "h-4 w-4" : "h-3 w-3", Class)" style="animation: bounce 1s infinite; animation-delay: 150ms;"></div>
-        <div class="@Shell.Cn("animate-bounce rounded-full bg-primary", Size == "sm" ? "h-2 w-2" : Size == "lg" ? "h-4 w-4" : "h-3 w-3", Class)" style="animation: bounce 1s infinite; animation-delay: 300ms;"></div>
-    </div>
-}
-else if (Variant == "pulse")
-{
-    <div class="@Shell.Cn("animate-pulse rounded-md bg-muted", Size == "sm" ? "h-4 w-16" : Size == "lg" ? "h-6 w-24" : "h-5 w-20", Class)"></div>
-}
-else if (Variant == "ring")
-{
-    <div class="@Shell.Cn("animate-spin rounded-full border-4 border-muted border-t-primary border-r-primary/50", Size == "sm" ? "h-6 w-6" : Size == "lg" ? "h-12 w-12" : "h-8 w-8", Class)"></div>
-}
-else if (Variant == "bars")
-{
-    <div class="flex items-end gap-1">
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.15s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-5 w-1" : Size == "lg" ? "h-10 w-2" : "h-8 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.3s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.45s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.6s;"></div>
-    </div>
-}
-else if (Variant == "bars-vertical")
-{
-    <div class="flex items-center gap-1">
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.15s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-5 w-1" : Size == "lg" ? "h-10 w-2" : "h-8 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.3s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.45s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.6s;"></div>
-    </div>
-}
-else if (Variant == "bars-pulse")
-{
-    <div class="flex items-center gap-1">
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.15s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-5 w-1" : Size == "lg" ? "h-10 w-2" : "h-8 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.3s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.45s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.6s;"></div>
-    </div>
-}
-else if (Variant == "grid")
-{
-    <div class="@Shell.Cn("grid grid-cols-3 gap-1", Size == "sm" ? "w-4 h-4" : Size == "lg" ? "w-8 h-8" : "w-6 h-6", Class)">
-        @for (int i = 0; i < 9; i++)
-        {
-            <div class="bg-primary rounded-sm animate-pulse" style="animation-delay: @(i * 0.1)s; animation-duration: 1.2s;"></div>
-        }
-    </div>
-}
-else if (Variant == "orbit")
-{
-    <div class="@Shell.Cn("relative", Size == "sm" ? "h-6 w-6" : Size == "lg" ? "h-12 w-12" : "h-8 w-8", Class)">
-        <div class="absolute inset-0 rounded-full border-2 border-primary/20"></div>
-        <div class="@Shell.Cn("absolute top-0 left-1/2 -translate-x-1/2 rounded-full bg-primary animate-spin", Size == "sm" ? "h-1.5 w-1.5" : Size == "lg" ? "h-3 w-3" : "h-2 w-2")" style="transform-origin: center calc(50% + @(Size == "sm" ? "0.75rem" : Size == "lg" ? "1.5rem" : "1rem"));"></div>
-    </div>
-}
+<span role="status" aria-label="@Label"
+      class="@Shell.Cn("shellui-loading inline-flex shrink-0 items-center justify-center", Variant is "shimmer" or "logo" ? "text-foreground" : "text-primary", Variant == "progress" ? "w-full" : "", Class)"
+      @attributes="AdditionalAttributes">
+    @switch (Variant)
+    {
+        case "dots":
+        case "typing":
+        case "wave":
+            <span class="flex items-center" style="height:@Px(S);gap:@Px(U * 0.5)">
+                @for (var i = 0; i < (Variant == "wave" ? 5 : 3); i++)
+                {
+                    <span class="block rounded-full bg-current" style="width:@Px(U);height:@Px(U);animation:@DotAnimation(i)"></span>
+                }
+            </span>
+            break;
+
+        case "pulse":
+            <span class="block rounded-md bg-muted" style="width:@Px(S * 3.5);height:@Px(S * 0.75);animation:shellui-loading-fade 1.6s ease-in-out infinite"></span>
+            break;
+
+        case "ring":
+            <svg viewBox="0 0 50 50" style="width:@Px(S);height:@Px(S);animation:shellui-loading-spin 1.4s linear infinite">
+                <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-opacity="0.15" stroke-width="5" />
+                <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" style="animation:shellui-loading-arc 1.4s ease-in-out infinite" />
+            </svg>
+            break;
+
+        case "bars":
+        case "bars-vertical":
+        case "bars-pulse":
+            <span class="flex items-center" style="height:@Px(S);gap:@Px(S / 10)">
+                @for (var i = 0; i < 5; i++)
+                {
+                    <span class="block h-full rounded-full bg-current" style="width:@Px(S / 8);@BarStyle(i)"></span>
+                }
+            </span>
+            break;
+
+        case "grid":
+        case "snake":
+        case "rows":
+        case "columns":
+        case "sequence":
+        case "twinkle":
+            <span class="grid grid-cols-3" style="width:@Px(S);height:@Px(S);gap:@Px(S / 12)">
+                @for (var i = 0; i < 9; i++)
+                {
+                    <span class="block rounded-[2px] bg-current" style="@CellStyle(i)"></span>
+                }
+            </span>
+            break;
+
+        case "logo":
+            <span class="grid grid-cols-5" style="width:@Px(S * 1.25);height:@Px(S * 1.25);gap:@Px(S / 16)">
+                @for (var i = 0; i < 25; i++)
+                {
+                    <span class="block rounded-full bg-current" style="@LogoCellStyle(i)"></span>
+                }
+            </span>
+            break;
+
+        case "orbit":
+            <svg viewBox="0 0 24 24" style="width:@Px(S);height:@Px(S);animation:shellui-loading-spin 1s linear infinite">
+                <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.15" stroke-width="2" />
+                <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.45" stroke-width="2" stroke-linecap="round" stroke-dasharray="14 42.55" stroke-dashoffset="-28.3" />
+                <circle cx="12" cy="3" r="2.5" fill="currentColor" />
+            </svg>
+            break;
+
+        case "activity":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                @for (var i = 0; i < 12; i++)
+                {
+                    <span class="absolute left-1/2 top-0 block rounded-full bg-current"
+                          style="width:@Px(Math.Max(1.5, S * 0.08));height:@Px(S * 0.28);margin-left:@Px(-Math.Max(1.5, S * 0.08) / 2);transform:rotate(@(i * 30)deg);transform-origin:50% @Px(S / 2);animation:shellui-loading-spoke 1s linear @Sec(i / 12.0 - 1) infinite"></span>
+                }
+            </span>
+            break;
+
+        case "chase":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                @for (var i = 0; i < 8; i++)
+                {
+                    <span class="absolute inset-0 block" style="transform:rotate(@(i * 45)deg)">
+                        <span class="absolute left-1/2 top-0 block rounded-full bg-current"
+                              style="width:@Px(S * 0.2);height:@Px(S * 0.2);margin-left:@Px(-S * 0.1);animation:shellui-loading-chase 1s ease-in-out @Sec(i / 8.0 - 1) infinite"></span>
+                    </span>
+                }
+            </span>
+            break;
+
+        case "dual-ring":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                <svg viewBox="0 0 50 50" class="absolute inset-0" style="width:100%;height:100%;animation:shellui-loading-spin 1.2s linear infinite">
+                    <circle cx="25" cy="25" r="21" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="66 132" />
+                </svg>
+                <svg viewBox="0 0 50 50" class="absolute" style="inset:25%;width:50%;height:50%;animation:shellui-loading-spin 0.9s linear infinite reverse">
+                    <circle cx="25" cy="25" r="19" fill="none" stroke="currentColor" stroke-opacity="0.6" stroke-width="7" stroke-linecap="round" stroke-dasharray="60 120" />
+                </svg>
+            </span>
+            break;
+
+        case "ripple":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                <span class="absolute inset-0 rounded-full" style="border:@Px(Border) solid currentColor;animation:shellui-loading-ripple 1.4s cubic-bezier(0,0.2,0.8,1) infinite"></span>
+                <span class="absolute inset-0 rounded-full" style="border:@Px(Border) solid currentColor;animation:shellui-loading-ripple 1.4s cubic-bezier(0,0.2,0.8,1) -0.7s infinite"></span>
+            </span>
+            break;
+
+        case "progress":
+            <span class="relative block w-full overflow-hidden rounded-full" style="height:@Px(Size == "sm" ? 2 : Size == "lg" ? 6 : 4);background:color-mix(in oklab, currentColor 15%, transparent)">
+                <span class="absolute inset-y-0 left-0 block w-2/5 rounded-full bg-current" style="animation:shellui-loading-progress 1.4s cubic-bezier(0.65,0.05,0.36,1) infinite"></span>
+            </span>
+            break;
+
+        case "shimmer":
+            <span class="@Shell.Cn("font-medium", Size == "sm" ? "text-xs" : Size == "lg" ? "text-base" : "text-sm")"
+                  style="background-image:linear-gradient(90deg, color-mix(in oklab, currentColor 35%, transparent) 25%, currentColor 50%, color-mix(in oklab, currentColor 35%, transparent) 75%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shellui-loading-shimmer 2s linear infinite">@(Text ?? "Loading...")</span>
+            break;
+
+        default:
+            <span class="block rounded-full" style="width:@Px(S);height:@Px(S);border:@Px(Border) solid color-mix(in oklab, currentColor 20%, transparent);border-top-color:currentColor;animation:shellui-loading-spin 0.75s linear infinite"></span>
+            break;
+    }
+</span>
+
+<style>
+    @@keyframes shellui-loading-spin { to { transform: rotate(360deg); } }
+    @@keyframes shellui-loading-arc { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
+    @@keyframes shellui-loading-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-80%); opacity: 1; } }
+    @@keyframes shellui-loading-typing { 0%, 60%, 100% { transform: scale(.75); opacity: .25; } 30% { transform: scale(1); opacity: 1; } }
+    @@keyframes shellui-loading-wave { 0%, 100% { transform: translateY(70%); } 50% { transform: translateY(-70%); } }
+    @@keyframes shellui-loading-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+    @@keyframes shellui-loading-bars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
+    @@keyframes shellui-loading-bars-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
+    @@keyframes shellui-loading-grid { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 35% { transform: scale(.35); opacity: .35; } }
+    @@keyframes shellui-loading-trail { 0% { opacity: 1; } 75%, 100% { opacity: .12; } }
+    @@keyframes shellui-loading-logo-on { 0%, 35%, 100% { opacity: 1; } 50%, 85% { opacity: .1; } }
+    @@keyframes shellui-loading-logo-off { 0%, 35%, 100% { opacity: .1; } 50%, 85% { opacity: 1; } }
+    @@keyframes shellui-loading-spoke { 0% { opacity: 1; } 100% { opacity: .15; } }
+    @@keyframes shellui-loading-chase { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.35); opacity: .2; } }
+    @@keyframes shellui-loading-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
+    @@keyframes shellui-loading-ripple { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
+    @@keyframes shellui-loading-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
+    @@keyframes shellui-loading-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+    @@media (prefers-reduced-motion: reduce) { .shellui-loading * { animation-duration: 2.5s !important; } }
+</style>
 
 @code {
-    [Parameter]
-    public string Variant { get; set; } = "spinner";
+    [Parameter] public string Variant { get; set; } = "spinner";
+    [Parameter] public string Size { get; set; } = "default";
+    [Parameter] public string Label { get; set; } = "Loading";
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
-    [Parameter]
-    public string Size { get; set; } = "default";
+    // Clockwise path around the 3x3 grid; the centre cell stays dim.
+    private static readonly int[] SnakePath = { 0, 1, 2, 5, 8, 7, 6, 3 };
+    private static readonly double[] TwinkleDelays = { 0.2, 0.9, 0.5, 1.2, 0.1, 0.7, 1.4, 0.3, 1.0 };
 
-    [Parameter]
-    public string Class { get; set; } = "";
-}
+    // The ShellUI mark: a prompt chevron beside a cursor bar.
+    private static readonly bool[] LogoPattern =
+    {
+        true,  false, false, false, true,
+        false, true,  false, false, true,
+        false, false, true,  false, true,
+        false, true,  false, false, true,
+        true,  false, false, false, true,
+    };
+
+    private double S => Size switch { "sm" => 16, "lg" => 40, _ => 24 };
+    private double U => S / 4;
+    private double Border => Math.Max(2, Math.Round(S / 10));
 
+    private static string Px(double value) => value.ToString("0.##", CultureInfo.InvariantCulture) + "px";
+    private static string Sec(double value) => value.ToString("0.###", CultureInfo.InvariantCulture) + "s";
+
+    private string DotAnimation(int i) => Variant switch
+    {
+        "typing" => $"shellui-loading-typing 1.4s ease-in-out {Sec(i * 0.2)} infinite",
+        "wave" => $"shellui-loading-wave 1s ease-in-out {Sec(i * 0.1 - 1)} infinite",
+        _ => $"shellui-loading-bounce 1.2s ease-in-out {Sec(i * 0.16)} infinite"
+    };
+
+    private string BarStyle(int i) => Variant switch
+    {
+        "bars-pulse" => $"animation:shellui-loading-bars-fade 1s ease-in-out {Sec(i * 0.12)} infinite",
+        "bars-vertical" => $"transform-origin:center;animation:shellui-loading-bars 1s ease-in-out {Sec(i * 0.12)} infinite",
+        _ => $"transform-origin:bottom;animation:shellui-loading-bars 1s ease-in-out {Sec(i * 0.12)} infinite"
+    };
+
+    private string CellStyle(int i)
+    {
+        int row = i / 3, column = i % 3;
+        switch (Variant)
+        {
+            case "grid":
+                return $"animation:shellui-loading-grid 1.3s ease-in-out {Sec((row + column) * 0.1)} infinite";
+            case "rows":
+                return Trail(row, 3, 1.2);
+            case "columns":
+                return Trail(column, 3, 1.2);
+            case "sequence":
+                return Trail(i, 9, 1.35);
+            case "twinkle":
+                return $"animation:shellui-loading-twinkle 1.6s ease-in-out {Sec(TwinkleDelays[i] - 1.6)} infinite";
+            default:
+                var step = Array.IndexOf(SnakePath, i);
+                return step < 0 ? "opacity:.12" : Trail(step, 8, 1);
+        }
+    }
+
+    private static string LogoCellStyle(int i)
+    {
+        var on = LogoPattern[i];
+        var delay = ((i / 5) + (i % 5)) * 0.05;
+        return $"opacity:{(on ? "1" : ".1")};animation:shellui-loading-logo-{(on ? "on" : "off")} 2.4s ease-in-out {Sec(delay)} infinite";
+    }
+
+    // Each step lights up in turn and fades while the next one brightens.
+    private static string Trail(int step, int steps, double duration) =>
+        $"animation:shellui-loading-trail {Sec(duration)} linear {Sec(step * duration / steps - duration)} infinite";
+}
diff --git a/NET10/BlazorInteractiveServer/Components/Models/CommandModels.cs b/NET10/BlazorInteractiveServer/Components/UI/Models/CommandModels.cs
similarity index 88%
rename from NET10/BlazorInteractiveServer/Components/Models/CommandModels.cs
rename to NET10/BlazorInteractiveServer/Components/UI/Models/CommandModels.cs
index 279f9d1..097793c 100644
--- a/NET10/BlazorInteractiveServer/Components/Models/CommandModels.cs
+++ b/NET10/BlazorInteractiveServer/Components/UI/Models/CommandModels.cs
@@ -6,5 +6,7 @@ public class CommandItem
     public string? Description { get; set; }
     public string? Icon { get; set; }
     public string? Shortcut { get; set; }
+    public string? Group { get; set; }
     public Func<Task>? Action { get; set; }
 }
+
diff --git a/NET10/BlazorInteractiveServer/Components/UI/NumberInput.razor b/NET10/BlazorInteractiveServer/Components/UI/NumberInput.razor
new file mode 100644
index 0000000..724671c
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/NumberInput.razor
@@ -0,0 +1,67 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using System.Globalization
+
+<div class="@Shell.Cn("flex h-10 w-full items-center overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", Disabled ? "opacity-50" : "", Class)">
+    <button type="button" aria-label="Decrease" disabled="@(Disabled || AtMin)" @onclick="DecrementAsync"
+            class="flex h-full w-10 shrink-0 items-center justify-center border-r border-input text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50">
+        <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 12h14" />
+        </svg>
+    </button>
+    <input type="number"
+           inputmode="decimal"
+           value="@Format(Value)"
+           min="@Format(Min)"
+           max="@Format(Max)"
+           step="@Format(Step)"
+           disabled="@Disabled"
+           @onchange="HandleChangeAsync"
+           class="h-full min-w-0 flex-1 bg-transparent px-2 text-center tabular-nums focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+           @attributes="AdditionalAttributes" />
+    <button type="button" aria-label="Increase" disabled="@(Disabled || AtMax)" @onclick="IncrementAsync"
+            class="flex h-full w-10 shrink-0 items-center justify-center border-l border-input text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50">
+        <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="M12 5v14M5 12h14" />
+        </svg>
+    </button>
+</div>
+
+@code {
+    [Parameter] public decimal? Value { get; set; }
+    [Parameter] public EventCallback<decimal?> ValueChanged { get; set; }
+    [Parameter] public decimal? Min { get; set; }
+    [Parameter] public decimal? Max { get; set; }
+    [Parameter] public decimal Step { get; set; } = 1;
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool AtMin => Min.HasValue && Value.HasValue && Value <= Min;
+    private bool AtMax => Max.HasValue && Value.HasValue && Value >= Max;
+
+    private static string? Format(decimal? value) => value?.ToString(CultureInfo.InvariantCulture);
+
+    private Task DecrementAsync() => SetAsync((Value ?? Min ?? 0) - Step);
+    private Task IncrementAsync() => SetAsync((Value ?? Min ?? 0) + Step);
+
+    private Task HandleChangeAsync(ChangeEventArgs e)
+    {
+        var text = e.Value?.ToString();
+        if (string.IsNullOrWhiteSpace(text)) return SetAsync(null);
+        return decimal.TryParse(text, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed)
+            ? SetAsync(parsed)
+            : SetAsync(Value);
+    }
+
+    private async Task SetAsync(decimal? value)
+    {
+        if (value.HasValue)
+        {
+            if (Min.HasValue && value < Min) value = Min;
+            if (Max.HasValue && value > Max) value = Max;
+        }
+        Value = value;
+        await ValueChanged.InvokeAsync(value);
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/QrCode.razor b/NET10/BlazorInteractiveServer/Components/UI/QrCode.razor
new file mode 100644
index 0000000..3743b38
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/QrCode.razor
@@ -0,0 +1,72 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using System.Text
+@using QRCoder
+
+@if (_moduleCount > 0)
+{
+    <svg xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 @_moduleCount @_moduleCount"
+         width="@Size"
+         height="@Size"
+         shape-rendering="crispEdges"
+         role="img"
+         aria-label="@(Label ?? Value)"
+         class="@Shell.Cn("rounded-md", Class)"
+         @attributes="AdditionalAttributes">
+        <rect width="100%" height="100%" fill="@Background" />
+        <path d="@_path" fill="@Foreground" />
+    </svg>
+}
+
+@code {
+    [Parameter] public string Value { get; set; } = "";
+    [Parameter] public int Size { get; set; } = 160;
+    [Parameter] public string ErrorCorrection { get; set; } = "M";
+    [Parameter] public string Foreground { get; set; } = "#000000";
+    [Parameter] public string Background { get; set; } = "#ffffff";
+    [Parameter] public string? Label { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string _path = "";
+    private int _moduleCount;
+    private string? _renderedKey;
+
+    protected override void OnParametersSet()
+    {
+        var key = ErrorCorrection + "|" + Value;
+        if (key == _renderedKey) return;
+        _renderedKey = key;
+
+        if (string.IsNullOrEmpty(Value))
+        {
+            _moduleCount = 0;
+            _path = "";
+            return;
+        }
+
+        var level = ErrorCorrection.ToUpperInvariant() switch
+        {
+            "L" => QRCodeGenerator.ECCLevel.L,
+            "Q" => QRCodeGenerator.ECCLevel.Q,
+            "H" => QRCodeGenerator.ECCLevel.H,
+            _ => QRCodeGenerator.ECCLevel.M
+        };
+
+        using var generator = new QRCodeGenerator();
+        using var data = generator.CreateQrCode(Value, level);
+        var matrix = data.ModuleMatrix;
+        _moduleCount = matrix.Count;
+
+        var path = new StringBuilder();
+        for (var y = 0; y < matrix.Count; y++)
+        {
+            for (var x = 0; x < matrix[y].Count; x++)
+            {
+                if (matrix[y][x]) path.Append('M').Append(x).Append(',').Append(y).Append("h1v1h-1z");
+            }
+        }
+        _path = path.ToString();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/RadarChart.razor b/NET10/BlazorInteractiveServer/Components/UI/RadarChart.razor
index a62d761..8695d87 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/RadarChart.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/RadarChart.razor
@@ -27,11 +27,12 @@
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
-        // Radar tooltips only trigger per point, not in shared mode.
+        // Radar tooltips only trigger per point, and without FollowCursor they are pinned to the top of the chart.
         if (ChartOptions.Tooltip != null)
         {
             ChartOptions.Tooltip.Shared = false;
             ChartOptions.Tooltip.Intersect = true;
+            ChartOptions.Tooltip.FollowCursor = true;
         }
     }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor b/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
index f44099e..fae3fba 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
@@ -6,7 +6,7 @@
 @if (Parent?.Open == true)
 {
     <div class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm animate-in fade-in-0" @onclick="Close"></div>
-    <div class="@SheetVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
+    <div @ref="_content" tabindex="-1" role="dialog" aria-modal="true" @onkeydown="OnKeyDownAsync" class="outline-none @SheetVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
         <div class="flex flex-col gap-4 p-6">
             @ChildContent
         </div>
@@ -21,14 +21,29 @@
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Parent?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Parent?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/NET10/BlazorInteractiveServer/Components/UI/SidebarProvider.razor b/NET10/BlazorInteractiveServer/Components/UI/SidebarProvider.razor
index dc8cf71..7b7a947 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/SidebarProvider.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/SidebarProvider.razor
@@ -12,9 +12,9 @@
 </div>
 
 @code {
-    private IJSObjectReference? _module;
-    private IJSObjectReference? _handlers;
+    private readonly string _handle = Guid.NewGuid().ToString("N");
     private DotNetObjectReference<SidebarProvider>? _dotnetRef;
+    private bool _sidebarInteropReady;
 
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public bool DefaultOpen { get; set; } = true;
@@ -53,17 +53,21 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender)
+        if (!firstRender || _sidebarInteropReady) return;
+
+        _dotnetRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("ShellUI.initSidebar", _handle, _dotnetRef);
+            _sidebarInteropReady = true;
+        }
+        catch (JSException ex)
         {
-            _dotnetRef = DotNetObjectReference.Create(this);
-            try
-            {
-                _module = await JSRuntime.InvokeAsync<IJSObjectReference>(
-                    "import", "./shellui-sidebar.js");
-                _handlers = await _module.InvokeAsync<IJSObjectReference>(
-                    "initSidebar", _dotnetRef);
-            }
-            catch { /* Pre-render or JS not available */ }
+            Console.Error.WriteLine($"ShellUI sidebar interop failed: {ex.Message}");
+        }
+        catch (InvalidOperationException ex)
+        {
+            Console.Error.WriteLine($"ShellUI sidebar interop is unavailable: {ex.Message}");
         }
     }
 
@@ -104,16 +108,12 @@
 
     public async ValueTask DisposeAsync()
     {
-        try
+        if (_sidebarInteropReady)
         {
-            if (_handlers != null)
-            {
-                await _handlers.InvokeVoidAsync("dispose");
-                await _handlers.DisposeAsync();
-            }
-            if (_module != null) await _module.DisposeAsync();
+            try { await JSRuntime.InvokeVoidAsync("ShellUI.disposeSidebar", _handle); }
+            catch (JSException) { }
         }
-        catch { }
+
         _dotnetRef?.Dispose();
     }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/StatCard.razor b/NET10/BlazorInteractiveServer/Components/UI/StatCard.razor
new file mode 100644
index 0000000..a7fe88a
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/StatCard.razor
@@ -0,0 +1,43 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<div class="@Shell.Cn("rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm", Class)" @attributes="AdditionalAttributes">
+    <div class="flex items-center justify-between gap-2">
+        <p class="text-sm font-medium text-muted-foreground">@Title</p>
+        @if (Icon != null)
+        {
+            <span class="flex text-muted-foreground [&>svg]:size-4">@Icon</span>
+        }
+    </div>
+    <div class="mt-2 flex flex-wrap items-baseline gap-2">
+        <p class="text-2xl font-bold tracking-tight tabular-nums">@Value</p>
+        @if (!string.IsNullOrEmpty(Change))
+        {
+            <span class="@Shell.Cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium", ChangeClass)">@Change</span>
+        }
+    </div>
+    @if (!string.IsNullOrEmpty(Description))
+    {
+        <p class="mt-1 text-xs text-muted-foreground">@Description</p>
+    }
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public string? Change { get; set; }
+    [Parameter] public string Trend { get; set; } = "neutral";
+    [Parameter] public string? Description { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ChangeClass => Trend.ToLowerInvariant() switch
+    {
+        "up" => "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+        "down" => "bg-red-500/10 text-red-600 dark:text-red-400",
+        _ => "bg-muted text-muted-foreground"
+    };
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Timeline.razor b/NET10/BlazorInteractiveServer/Components/UI/Timeline.razor
new file mode 100644
index 0000000..72aeae4
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/Timeline.razor
@@ -0,0 +1,12 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<ol class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
+    @ChildContent
+</ol>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/TimelineItem.razor b/NET10/BlazorInteractiveServer/Components/UI/TimelineItem.razor
new file mode 100644
index 0000000..969f334
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/TimelineItem.razor
@@ -0,0 +1,39 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<li class="@Shell.Cn("group relative flex gap-3 pb-8 last:pb-0", Class)" @attributes="AdditionalAttributes">
+    <span aria-hidden="true" class="absolute bottom-0 left-3.5 top-0 w-px -translate-x-1/2 bg-border group-first:top-3.5 group-last:bottom-auto group-last:h-3.5 group-only:hidden"></span>
+    <div class="relative z-10 flex h-7 w-7 shrink-0 items-center justify-center">
+        @if (Icon != null)
+        {
+            <span class="@Shell.Cn("flex h-7 w-7 items-center justify-center rounded-full border bg-background [&>svg]:size-3.5", Active ? "border-primary text-primary" : "border-border text-muted-foreground")">@Icon</span>
+        }
+        else
+        {
+            <span class="@Shell.Cn("h-2.5 w-2.5 rounded-full", Active ? "bg-primary ring-4 ring-primary/20" : "bg-muted-foreground")"></span>
+        }
+    </div>
+    <div class="min-w-0 flex-1">
+        <div class="flex min-h-7 flex-wrap items-center gap-x-2">
+            <h3 class="text-sm font-semibold text-foreground">@Title</h3>
+            @if (!string.IsNullOrEmpty(Time))
+            {
+                <time class="text-xs text-muted-foreground">@Time</time>
+            }
+        </div>
+        @if (ChildContent != null)
+        {
+            <div class="text-sm text-muted-foreground">@ChildContent</div>
+        }
+    </div>
+</li>
+
+@code {
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Time { get; set; }
+    [Parameter] public bool Active { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/ToggleGroup.razor b/NET10/BlazorInteractiveServer/Components/UI/ToggleGroup.razor
new file mode 100644
index 0000000..0ebe7f4
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/ToggleGroup.razor
@@ -0,0 +1,45 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<CascadingValue Value="this" IsFixed="true">
+    <div role="@(Multiple ? "group" : "radiogroup")" class="@Shell.Cn("inline-flex items-center gap-1", Class)" @attributes="AdditionalAttributes">
+        @ChildContent
+    </div>
+</CascadingValue>
+
+@code {
+    [Parameter] public bool Multiple { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public List<string> Values { get; set; } = new();
+    [Parameter] public EventCallback<List<string>> ValuesChanged { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private readonly List<ToggleGroupItem> _items = new();
+
+    internal void Register(ToggleGroupItem item) => _items.Add(item);
+    internal void Unregister(ToggleGroupItem item) => _items.Remove(item);
+
+    public bool IsPressed(string value) => Multiple ? Values.Contains(value) : Value == value;
+
+    public async Task ToggleAsync(string value)
+    {
+        if (Multiple)
+        {
+            var next = new List<string>(Values);
+            if (!next.Remove(value)) next.Add(value);
+            Values = next;
+            await ValuesChanged.InvokeAsync(next);
+        }
+        else
+        {
+            Value = Value == value ? null : value;
+            await ValueChanged.InvokeAsync(Value);
+        }
+
+        foreach (var item in _items.ToArray()) item.Refresh();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/ToggleGroupItem.razor b/NET10/BlazorInteractiveServer/Components/UI/ToggleGroupItem.razor
new file mode 100644
index 0000000..ec1dca6
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/ToggleGroupItem.razor
@@ -0,0 +1,37 @@
+@namespace BlazorInteractiveServer.Components.UI
+@implements IDisposable
+
+<button type="button"
+        role="@(Group?.Multiple == true ? "checkbox" : "radio")"
+        aria-checked="@(IsPressed ? "true" : "false")"
+        data-state="@(IsPressed ? "on" : "off")"
+        disabled="@IsDisabled"
+        @onclick="ToggleAsync"
+        class="@Shell.Cn("inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-md px-2.5 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4", IsPressed ? "bg-accent text-accent-foreground" : "bg-transparent", Class)"
+        @attributes="AdditionalAttributes">
+    @ChildContent
+</button>
+
+@code {
+    [CascadingParameter] public ToggleGroup? Group { get; set; }
+    [Parameter] public string Value { get; set; } = "";
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsPressed => Group?.IsPressed(Value) == true;
+    private bool IsDisabled => Disabled || Group?.Disabled == true;
+
+    protected override void OnInitialized() => Group?.Register(this);
+
+    internal void Refresh() => InvokeAsync(StateHasChanged);
+
+    private async Task ToggleAsync()
+    {
+        if (Group != null) await Group.ToggleAsync(Value);
+    }
+
+    public void Dispose() => Group?.Unregister(this);
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/TreeView.razor b/NET10/BlazorInteractiveServer/Components/UI/TreeView.razor
new file mode 100644
index 0000000..85cd445
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/TreeView.razor
@@ -0,0 +1,28 @@
+@namespace BlazorInteractiveServer.Components.UI
+
+<CascadingValue Value="this" IsFixed="true">
+    <ul role="tree" class="@Shell.Cn("space-y-0.5 text-sm", Class)" @attributes="AdditionalAttributes">
+        @ChildContent
+    </ul>
+</CascadingValue>
+
+@code {
+    [Parameter] public string? SelectedValue { get; set; }
+    [Parameter] public EventCallback<string?> SelectedValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private readonly List<TreeViewItem> _items = new();
+
+    internal void Register(TreeViewItem item) => _items.Add(item);
+    internal void Unregister(TreeViewItem item) => _items.Remove(item);
+
+    public async Task SelectAsync(string value)
+    {
+        SelectedValue = value;
+        await SelectedValueChanged.InvokeAsync(value);
+        foreach (var item in _items.ToArray()) item.Refresh();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/TreeViewItem.razor b/NET10/BlazorInteractiveServer/Components/UI/TreeViewItem.razor
new file mode 100644
index 0000000..1395996
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/TreeViewItem.razor
@@ -0,0 +1,68 @@
+@namespace BlazorInteractiveServer.Components.UI
+@implements IDisposable
+
+<li role="treeitem"
+    aria-expanded="@(HasChildren ? (_expanded ? "true" : "false") : null)"
+    aria-selected="@(IsSelected ? "true" : "false")"
+    class="@Shell.Cn(Class)"
+    @attributes="AdditionalAttributes">
+    <button type="button" disabled="@Disabled" @onclick="HandleClickAsync"
+            class="@Shell.Cn("flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", IsSelected ? "bg-accent font-medium text-accent-foreground" : "text-foreground hover:bg-muted")">
+        @if (HasChildren)
+        {
+            <svg class="@Shell.Cn("h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200", _expanded ? "rotate-90" : "")" 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="M9 5l7 7-7 7" />
+            </svg>
+        }
+        else
+        {
+            <span class="w-4 shrink-0"></span>
+        }
+        @if (Icon != null)
+        {
+            <span class="flex shrink-0 text-muted-foreground [&>svg]:size-4">@Icon</span>
+        }
+        <span class="truncate">@Label</span>
+    </button>
+    @if (HasChildren && _expanded)
+    {
+        <ul role="group" class="ml-4 mt-0.5 space-y-0.5 border-l border-border pl-2">
+            @ChildContent
+        </ul>
+    }
+</li>
+
+@code {
+    [CascadingParameter] public TreeView? Tree { get; set; }
+    [Parameter] public string Label { get; set; } = "";
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public bool DefaultExpanded { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool _expanded;
+
+    private string EffectiveValue => Value ?? Label;
+    private bool HasChildren => ChildContent != null;
+    private bool IsSelected => Tree?.SelectedValue == EffectiveValue;
+
+    protected override void OnInitialized()
+    {
+        _expanded = DefaultExpanded;
+        Tree?.Register(this);
+    }
+
+    internal void Refresh() => InvokeAsync(StateHasChanged);
+
+    private async Task HandleClickAsync()
+    {
+        if (HasChildren) _expanded = !_expanded;
+        if (Tree != null) await Tree.SelectAsync(EffectiveValue);
+    }
+
+    public void Dispose() => Tree?.Unregister(this);
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Variants/ChartVariants.cs b/NET10/BlazorInteractiveServer/Components/UI/Variants/ChartVariants.cs
index 730b7ef..6178703 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Variants/ChartVariants.cs
+++ b/NET10/BlazorInteractiveServer/Components/UI/Variants/ChartVariants.cs
@@ -15,7 +15,7 @@ public enum ChartTheme
 /* ApexCharts configuration tuned to the shadcn/ui chart aesthetic.
    ApexCharts accepts colors as JS strings only, so palettes use oklch literals
    mirroring the theme's --chart-N tokens. Grid, axis, tooltip, and legend chrome
-   is styled via companion CSS (shellui-theme.css / chart-styles). */
+   is styled via companion CSS (charts.css). */
 public static class ChartVariants
 {
     public static ApexCharts.ApexChartOptions<TItem> GetOptions<TItem>(ChartTheme theme = ChartTheme.Default, bool showToolbar = false, bool showLegend = true) where TItem : class
@@ -275,4 +275,4 @@ private static List<string> GetThemeColors(ChartTheme theme)
             _ => GetThemeColors(ChartTheme.Default)
         };
     }
-}
+}
\ No newline at end of file
diff --git a/NET10/BlazorInteractiveServer/Components/_Imports.razor b/NET10/BlazorInteractiveServer/Components/_Imports.razor
index a7cb58e..a3b69f3 100644
--- a/NET10/BlazorInteractiveServer/Components/_Imports.razor
+++ b/NET10/BlazorInteractiveServer/Components/_Imports.razor
@@ -10,3 +10,5 @@
 @using BlazorInteractiveServer.Components
 
 @using BlazorInteractiveServer.Components.UI
+
+@using BlazorInteractiveServer.Components.UI.Variants
diff --git a/src/ShellUI.Components/Components/AspectRatio.razor b/src/ShellUI.Components/Components/AspectRatio.razor
new file mode 100644
index 0000000..4cd385f
--- /dev/null
+++ b/src/ShellUI.Components/Components/AspectRatio.razor
@@ -0,0 +1,15 @@
+@namespace ShellUI.Components
+
+<div class="@Shell.Cn("relative w-full overflow-hidden [&>*]:absolute [&>*]:inset-0 [&>*]:h-full [&>*]:w-full", Class)" style="aspect-ratio: @RatioCss" @attributes="AdditionalAttributes">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public double Ratio { get; set; } = 16d / 9d;
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string RatioCss => Ratio.ToString(System.Globalization.CultureInfo.InvariantCulture);
+}
diff --git a/src/ShellUI.Components/Components/ButtonGroup.razor b/src/ShellUI.Components/Components/ButtonGroup.razor
new file mode 100644
index 0000000..f523137
--- /dev/null
+++ b/src/ShellUI.Components/Components/ButtonGroup.razor
@@ -0,0 +1,18 @@
+@namespace ShellUI.Components
+
+<div role="group" class="@Shell.Cn("inline-flex", IsVertical ? VerticalClass : HorizontalClass, Class)" @attributes="AdditionalAttributes">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public string Orientation { get; set; } = "horizontal";
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsVertical => string.Equals(Orientation, "vertical", StringComparison.OrdinalIgnoreCase);
+
+    private const string HorizontalClass = "flex-row [&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px [&>*]:focus-visible:z-10";
+    private const string VerticalClass = "flex-col [&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px [&>*]:focus-visible:z-10";
+}
diff --git a/src/ShellUI.Components/Components/Chat.razor b/src/ShellUI.Components/Components/Chat.razor
new file mode 100644
index 0000000..0560e44
--- /dev/null
+++ b/src/ShellUI.Components/Components/Chat.razor
@@ -0,0 +1,30 @@
+@namespace ShellUI.Components
+
+<div class="@Shell.Cn("flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background", Class)"
+     style="@(Height != null ? $"height: {Height}" : null)"
+     @attributes="AdditionalAttributes">
+    @if (Header != null)
+    {
+        <div class="shrink-0 border-b border-border px-4 py-3">@Header</div>
+    }
+    @* column-reverse keeps the scroll anchored to the newest message without JS *@
+    <div class="flex min-h-0 flex-1 flex-col-reverse overflow-y-auto p-4" role="log" aria-live="polite">
+        <div class="flex flex-col gap-4">
+            @ChildContent
+        </div>
+    </div>
+    @if (Footer != null)
+    {
+        <div class="shrink-0 border-t border-border p-3">@Footer</div>
+    }
+</div>
+
+@code {
+    [Parameter] public string? Height { get; set; }
+    [Parameter] public RenderFragment? Header { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public RenderFragment? Footer { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/src/ShellUI.Components/Components/ChatInput.razor b/src/ShellUI.Components/Components/ChatInput.razor
new file mode 100644
index 0000000..c8d3199
--- /dev/null
+++ b/src/ShellUI.Components/Components/ChatInput.razor
@@ -0,0 +1,94 @@
+@namespace ShellUI.Components
+
+<form @onsubmit="SubmitAsync"
+      class="@Shell.Cn("flex w-full items-end gap-2 rounded-lg border border-input bg-background p-2 ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", Class)"
+      @attributes="AdditionalAttributes">
+    @if (Actions != null)
+    {
+        <div class="flex shrink-0 items-center gap-1 pb-0.5">@Actions</div>
+    }
+    <textarea @key="_inputKey"
+              @ref="_textarea"
+              rows="@Rows"
+              value="@Value"
+              placeholder="@Placeholder"
+              aria-label="@Placeholder"
+              disabled="@Disabled"
+              @oninput="HandleInputAsync"
+              @onkeydown="HandleKeyDownAsync"
+              class="max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2 py-2 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"></textarea>
+    <button type="submit" aria-label="Send" disabled="@(!CanSubmit)"
+            class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50">
+        @if (IsLoading)
+        {
+            <svg class="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+            </svg>
+        }
+        else
+        {
+            <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 12h14M12 5l7 7-7 7" />
+            </svg>
+        }
+    </button>
+</form>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public EventCallback<string> OnSubmit { get; set; }
+    [Parameter] public string Placeholder { get; set; } = "Send a message...";
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public bool IsLoading { get; set; }
+    [Parameter] public int Rows { get; set; } = 1;
+    [Parameter] public RenderFragment? Actions { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private ElementReference _textarea;
+    private int _inputKey;
+    private bool _ignoreNextInput;
+    private bool _refocus;
+
+    private bool CanSubmit => !Disabled && !IsLoading && !string.IsNullOrWhiteSpace(Value);
+
+    // Enter sends; the browser's newline still arrives as the next input event, so it is dropped and the textarea re-created.
+    private async Task HandleKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key != "Enter" || e.ShiftKey) return;
+        _ignoreNextInput = true;
+        await SubmitAsync();
+    }
+
+    private async Task HandleInputAsync(ChangeEventArgs e)
+    {
+        if (_ignoreNextInput)
+        {
+            _ignoreNextInput = false;
+            _inputKey++;
+            _refocus = true;
+            return;
+        }
+        Value = e.Value?.ToString();
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private async Task SubmitAsync()
+    {
+        if (!CanSubmit) return;
+        var text = Value!.Trim();
+        Value = "";
+        await ValueChanged.InvokeAsync(Value);
+        await OnSubmit.InvokeAsync(text);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_refocus) return;
+        _refocus = false;
+        await _textarea.FocusAsync();
+    }
+}
diff --git a/src/ShellUI.Components/Components/ChatMessage.razor b/src/ShellUI.Components/Components/ChatMessage.razor
new file mode 100644
index 0000000..bda9d39
--- /dev/null
+++ b/src/ShellUI.Components/Components/ChatMessage.razor
@@ -0,0 +1,65 @@
+@namespace ShellUI.Components
+
+<div class="@Shell.Cn("flex w-full gap-3", IsUser ? "flex-row-reverse" : "flex-row", Class)" @attributes="AdditionalAttributes">
+    @if (Avatar != null)
+    {
+        <div class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-medium">@Avatar</div>
+    }
+    <div class="@Shell.Cn("flex max-w-[80%] flex-col gap-1", IsUser ? "items-end" : "items-start")">
+        @if (!string.IsNullOrEmpty(Name) || !string.IsNullOrEmpty(Timestamp))
+        {
+            <div class="flex items-center gap-2 text-xs text-muted-foreground">
+                @if (!string.IsNullOrEmpty(Name))
+                {
+                    <span class="font-medium text-foreground">@Name</span>
+                }
+                @if (!string.IsNullOrEmpty(Timestamp))
+                {
+                    <span>@Timestamp</span>
+                }
+            </div>
+        }
+        <div class="@Shell.Cn("break-words rounded-lg px-3 py-2 text-sm leading-relaxed", BubbleClass)">
+            @if (Text != null)
+            {
+                <span class="whitespace-pre-line">@Text</span>
+            }
+            @ChildContent
+            @if (IsStreaming)
+            {
+                <span class="ml-1 inline-flex items-center gap-0.5 align-middle" aria-label="Typing">
+                    <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.3s]"></span>
+                    <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.15s]"></span>
+                    <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-current"></span>
+                </span>
+            }
+        </div>
+        @if (Actions != null)
+        {
+            <div class="flex items-center gap-1 text-muted-foreground">@Actions</div>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Role { get; set; } = "assistant";
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public string? Name { get; set; }
+    [Parameter] public string? Timestamp { get; set; }
+    [Parameter] public bool IsStreaming { get; set; }
+    [Parameter] public RenderFragment? Avatar { get; set; }
+    [Parameter] public RenderFragment? Actions { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsUser => string.Equals(Role, "user", StringComparison.OrdinalIgnoreCase);
+
+    private string BubbleClass => Role.ToLowerInvariant() switch
+    {
+        "user" => "bg-primary text-primary-foreground",
+        "system" => "border border-border bg-background italic text-muted-foreground",
+        _ => "bg-muted text-foreground"
+    };
+}
diff --git a/src/ShellUI.Components/Components/Command.razor b/src/ShellUI.Components/Components/Command.razor
index 72ed30a..f469058 100644
--- a/src/ShellUI.Components/Components/Command.razor
+++ b/src/ShellUI.Components/Components/Command.razor
@@ -1,172 +1,198 @@
-@using Microsoft.JSInterop
 @using ShellUI.Components.Models
 
-<Dialog Open="IsOpen" OpenChanged="HandleOpenChanged">
-    <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-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" />
+@if (IsOpen)
+{
+    <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity duration-150 starting:opacity-0" @onclick="CloseAsync"></div>
+    <div role="dialog" aria-modal="true" aria-label="Command menu"
+         class="fixed left-1/2 top-[15vh] z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl transition duration-150 ease-out starting:scale-95 starting:opacity-0">
+        <div class="flex items-center gap-3 border-b border-border px-4">
+            <svg class="h-4 w-4 shrink-0 text-muted-foreground" 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-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z" />
             </svg>
-            <input
-                @ref="_searchInput"
-                @bind-value="_searchQuery"
-                @bind-value:event="oninput"
-                @onkeydown="OnKeyDown"
-                type="text"
-                placeholder="@Placeholder"
-                class="flex h-10 w-full rounded-md bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" />
+            <input @ref="_input"
+                   value="@_query"
+                   @oninput="OnInput"
+                   @onkeydown="OnKeyDownAsync"
+                   type="text"
+                   role="combobox"
+                   aria-expanded="true"
+                   aria-controls="@_listId"
+                   aria-activedescendant="@(_filtered.Count > 0 ? ItemId(_active) : null)"
+                   autocomplete="off"
+                   spellcheck="false"
+                   placeholder="@Placeholder"
+                   class="h-12 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+            <kbd class="hidden h-5 shrink-0 items-center rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex">Esc</kbd>
         </div>
 
-        <!-- Results -->
-        <div class="max-h-[300px] overflow-y-auto p-2">
-            @if (_filteredCommands.Any())
+        <div id="@_listId" role="listbox" class="max-h-[min(360px,55vh)] overflow-y-auto overscroll-contain p-1.5">
+            @if (_filtered.Count == 0)
             {
-                @foreach (var command in _filteredCommands)
+                <p class="py-10 text-center text-sm text-muted-foreground">No results for "@_query"</p>
+            }
+            else
+            {
+                string? group = null;
+                for (var i = 0; i < _filtered.Count; i++)
                 {
-                    <button
-                        @onclick="() => SelectCommand(command)"
-                        class="flex w-full items-center rounded-md px-2 py-2 text-sm text-left hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none">
+                    var index = i;
+                    var command = _filtered[i];
+                    if (!string.IsNullOrEmpty(command.Group) && command.Group != group)
+                    {
+                        group = command.Group;
+                        <div class="px-2.5 pb-1 pt-3 text-xs font-medium text-muted-foreground first:pt-1.5">@group</div>
+                    }
+                    <div id="@ItemId(index)"
+                         @ref="_itemRefs[index]"
+                         role="option"
+                         tabindex="-1"
+                         aria-selected="@(index == _active ? "true" : "false")"
+                         @onclick="() => SelectAsync(command)"
+                         @onmousemove="() => SetActive(index)"
+                         class="@Shell.Cn("flex cursor-pointer select-none items-center gap-3 rounded-lg px-2.5 py-2 text-sm outline-none", index == _active ? "bg-accent text-accent-foreground" : "text-foreground")">
                         @if (!string.IsNullOrEmpty(command.Icon))
                         {
-                            <div class="mr-3 flex h-4 w-4 items-center justify-center text-muted-foreground">
-                                @((MarkupString)command.Icon)
-                            </div>
+                            <span class="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4">@((MarkupString)command.Icon)</span>
                         }
-                        <div class="flex-1">
-                            <div class="font-medium text-foreground">@command.Title</div>
+                        <div class="min-w-0 flex-1">
+                            <div class="truncate font-medium">@command.Title</div>
                             @if (!string.IsNullOrEmpty(command.Description))
                             {
-                                <div class="text-xs text-muted-foreground">@command.Description</div>
+                                <div class="truncate text-xs text-muted-foreground">@command.Description</div>
                             }
                         </div>
                         @if (!string.IsNullOrEmpty(command.Shortcut))
                         {
-                            <div class="ml-3 flex items-center gap-0.5">
+                            <span class="ml-auto flex shrink-0 items-center gap-1">
                                 @foreach (var key in command.Shortcut.Split('+'))
                                 {
-                                    <kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
-                                        <span class="text-xs">@key</span>
-                                    </kbd>
+                                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1 font-mono text-[10px] font-medium text-muted-foreground">@key</kbd>
                                 }
-                            </div>
+                            </span>
                         }
-                    </button>
+                    </div>
                 }
             }
-            else
-            {
-                <div class="p-6 text-center text-sm text-muted-foreground">
-                    No results found.
-                </div>
-            }
         </div>
-    </DialogContent>
-</Dialog>
-
-@code {
-    [Parameter]
-    public bool IsOpen { get; set; }
 
-    [Parameter]
-    public string Placeholder { get; set; } = "Type a command or search...";
-
-    [Parameter]
-    public List<CommandItem> Commands { get; set; } = new();
+        <div class="flex items-center gap-4 border-t border-border bg-muted/40 px-4 py-2 text-xs text-muted-foreground">
+            <span class="flex items-center gap-1">
+                <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]">&uarr;</kbd>
+                <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]">&darr;</kbd>
+                Navigate
+            </span>
+            <span class="flex items-center gap-1">
+                <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]">&crarr;</kbd>
+                Select
+            </span>
+            <span class="ml-auto tabular-nums">@_filtered.Count @(_filtered.Count == 1 ? "result" : "results")</span>
+        </div>
+    </div>
+}
 
-    [Parameter]
-    public EventCallback<bool> IsOpenChanged { get; set; }
+@code {
+    [Parameter] public bool IsOpen { get; set; }
+    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
+    [Parameter] public List<CommandItem> Commands { get; set; } = new();
+    [Parameter] public EventCallback<CommandItem> CommandSelected { get; set; }
+    [Parameter] public string Placeholder { get; set; } = "Type a command or search...";
 
-    [Parameter]
-    public EventCallback<CommandItem> CommandSelected { get; set; }
+    private readonly string _listId = $"command-list-{Guid.NewGuid():N}";
+    private readonly Dictionary<int, ElementReference> _itemRefs = new();
+    private ElementReference _input;
+    private List<CommandItem> _filtered = new();
+    private string _query = "";
+    private int _active;
+    private bool _wasOpen;
+    private bool _focusInput;
+    private bool _scrollToActive;
 
-    private string _searchQuery = "";
-    private List<CommandItem> _filteredCommands = new();
-    private ElementReference _searchInput;
-    private bool _shouldFocus;
+    private string ItemId(int index) => $"{_listId}-{index}";
 
     protected override void OnParametersSet()
     {
-        UpdateFilteredCommands();
-        if (IsOpen)
+        if (IsOpen && !_wasOpen)
         {
-            _shouldFocus = true;
+            _query = "";
+            _active = 0;
+            _focusInput = true;
         }
+        _wasOpen = IsOpen;
+        Filter();
     }
 
-    private void UpdateFilteredCommands()
+    private void OnInput(ChangeEventArgs e)
     {
-        if (string.IsNullOrWhiteSpace(_searchQuery))
-        {
-            _filteredCommands = Commands.ToList();
-        }
-        else
-        {
-            _filteredCommands = Commands
-                .Where(c =>
-                    c.Title.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) ||
-                    (c.Description?.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) == true))
+        _query = e.Value?.ToString() ?? "";
+        _active = 0;
+        Filter();
+    }
+
+    private void Filter()
+    {
+        var query = _query.Trim();
+        _filtered = query.Length == 0
+            ? Commands.ToList()
+            : Commands
+                .Where(c => c.Title.Contains(query, StringComparison.OrdinalIgnoreCase)
+                    || c.Description?.Contains(query, StringComparison.OrdinalIgnoreCase) == true
+                    || c.Group?.Contains(query, StringComparison.OrdinalIgnoreCase) == true)
+                .OrderBy(c => c.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0 : 1)
                 .ToList();
-        }
+        if (_active >= _filtered.Count) _active = Math.Max(0, _filtered.Count - 1);
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    private void SetActive(int index) => _active = index;
+
+    private void Move(int index)
+    {
+        if (_filtered.Count == 0) return;
+        _active = (index + _filtered.Count) % _filtered.Count;
+        _scrollToActive = true;
+    }
+
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
     {
-        if (_shouldFocus)
+        switch (e.Key)
         {
-            _shouldFocus = false;
-            try
-            {
-                await _searchInput.FocusAsync();
-            }
-            catch { }
+            case "ArrowDown": Move(_active + 1); break;
+            case "ArrowUp": Move(_active - 1); break;
+            case "Home": Move(0); break;
+            case "End": Move(_filtered.Count - 1); break;
+            case "Enter":
+                if (_filtered.Count > 0) await SelectAsync(_filtered[_active]);
+                break;
+            case "Escape": await CloseAsync(); break;
         }
     }
 
-    private async Task SelectCommand(CommandItem command)
+    private async Task SelectAsync(CommandItem command)
     {
+        await CloseAsync();
         await CommandSelected.InvokeAsync(command);
-        await CloseCommand();
     }
 
-    private async Task CloseCommand()
+    private async Task CloseAsync()
     {
         IsOpen = false;
-        _searchQuery = "";
-        await IsOpenChanged.InvokeAsync(IsOpen);
-    }
-    
-    private async Task HandleOpenChanged(bool isOpen)
-    {
-        if (!isOpen)
-        {
-            await CloseCommand();
-        }
-        else 
-        {
-             IsOpen = isOpen;
-             await IsOpenChanged.InvokeAsync(isOpen);
-        }
+        _wasOpen = false;
+        await IsOpenChanged.InvokeAsync(false);
     }
 
-    private async Task OnKeyDown(KeyboardEventArgs e)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (e.Key == "Escape")
+        if (!IsOpen) return;
+        if (_focusInput)
         {
-            await CloseCommand();
+            _focusInput = false;
+            await _input.FocusAsync();
         }
-        else if (e.Key == "Enter" && _filteredCommands.Any())
+        if (_scrollToActive && _itemRefs.TryGetValue(_active, out var item))
         {
-            await SelectCommand(_filteredCommands.First());
-        }
-        else if (e.Key == "ArrowDown" && _filteredCommands.Count > 1)
-        {
-            // Could implement keyboard navigation here
-        }
-        else if (e.Key == "ArrowUp" && _filteredCommands.Count > 1)
-        {
-            // Could implement keyboard navigation here
+            // Focusing the row scrolls it into view without custom JS; focus then returns to the input.
+            _scrollToActive = false;
+            await item.FocusAsync(preventScroll: false);
+            await _input.FocusAsync(preventScroll: true);
         }
     }
 }
-
diff --git a/src/ShellUI.Components/Components/CommandPalette.razor b/src/ShellUI.Components/Components/CommandPalette.razor
index 9a6592a..675d39e 100644
--- a/src/ShellUI.Components/Components/CommandPalette.razor
+++ b/src/ShellUI.Components/Components/CommandPalette.razor
@@ -21,11 +21,21 @@
     [Parameter] public bool UseMeta { get; set; } = true;
     [Parameter] public bool UseShift { get; set; }
     [Parameter] public bool UseAlt { get; set; }
+    [Parameter] public bool IsOpen { get; set; }
+    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
 
     private bool _isOpen;
     private IJSObjectReference? _module;
     private DotNetObjectReference<CommandPalette>? _selfRef;
     private readonly string _handle = Guid.NewGuid().ToString("N");
+    private bool _lastIsOpen;
+
+    protected override void OnParametersSet()
+    {
+        if (IsOpen == _lastIsOpen) return;
+        _lastIsOpen = IsOpen;
+        _isOpen = IsOpen;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -43,17 +53,17 @@
     }
 
     [JSInvokable]
-    public Task OnShortcut()
+    public async Task OnShortcut()
     {
         _isOpen = !_isOpen;
+        await IsOpenChanged.InvokeAsync(_isOpen);
         StateHasChanged();
-        return Task.CompletedTask;
     }
 
-    private Task OnIsOpenChanged(bool open)
+    private async Task OnIsOpenChanged(bool open)
     {
         _isOpen = open;
-        return Task.CompletedTask;
+        await IsOpenChanged.InvokeAsync(open);
     }
 
     private async Task OnCommandSelected(CommandItem item)
diff --git a/src/ShellUI.Components/Components/DialogContent.razor b/src/ShellUI.Components/Components/DialogContent.razor
index 5540fea..c2fa0e9 100644
--- a/src/ShellUI.Components/Components/DialogContent.razor
+++ b/src/ShellUI.Components/Components/DialogContent.razor
@@ -6,7 +6,7 @@
 @if (Dialog?.Open == true)
 {
     <div class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" @onclick="Close"></div>
-    <div class="@Shell.Cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", Class)" @attributes="AdditionalAttributes">
+    <div @ref="_content" tabindex="-1" role="dialog" aria-modal="true" @onkeydown="OnKeyDownAsync" class="@Shell.Cn("outline-none fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", Class)" @attributes="AdditionalAttributes">
         @ChildContent
         <button type="button" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" @onclick="Close">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
@@ -23,6 +23,8 @@
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
@@ -32,8 +34,21 @@
         }
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Dialog?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Dialog?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/src/ShellUI.Components/Components/DrawerContent.razor b/src/ShellUI.Components/Components/DrawerContent.razor
index 4cdb3b7..a2510ae 100644
--- a/src/ShellUI.Components/Components/DrawerContent.razor
+++ b/src/ShellUI.Components/Components/DrawerContent.razor
@@ -6,7 +6,7 @@
 @if (Parent?.Open == true)
 {
     <div class="fixed inset-0 z-50 bg-black/80 animate-in fade-in-0" @onclick="Close"></div>
-    <div class="@DrawerVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
+    <div @ref="_content" tabindex="-1" role="dialog" aria-modal="true" @onkeydown="OnKeyDownAsync" class="outline-none @DrawerVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
         <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
         <div class="flex flex-col gap-4 p-4">
             @ChildContent
@@ -22,14 +22,29 @@
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Parent?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Parent?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/src/ShellUI.Components/Components/ImageViewer.razor b/src/ShellUI.Components/Components/ImageViewer.razor
new file mode 100644
index 0000000..18562b9
--- /dev/null
+++ b/src/ShellUI.Components/Components/ImageViewer.razor
@@ -0,0 +1,81 @@
+@namespace ShellUI.Components
+@using System.Globalization
+
+<button type="button" @onclick="Open" aria-label="@($"View {Alt}")"
+        class="@Shell.Cn("group relative block overflow-hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", Class)">
+    <img src="@(ThumbnailSrc ?? Src)" alt="@Alt" loading="lazy"
+         class="@Shell.Cn("h-full w-full object-cover transition-transform duration-200 group-hover:scale-105", ImageClass)"
+         @attributes="AdditionalAttributes" />
+</button>
+
+@if (_open)
+{
+    <div @ref="_overlay" tabindex="-1" role="dialog" aria-modal="true" aria-label="@Alt"
+         @onkeydown="HandleKeyDown" @onclick="Close"
+         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 outline-none">
+        <div class="absolute right-4 top-4 flex gap-2" @onclick:stopPropagation="true">
+            <button type="button" aria-label="Zoom out" disabled="@(_scale <= MinScale)" @onclick="ZoomOut" class="@ControlClass">
+                <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 12h14" /></svg>
+            </button>
+            <button type="button" aria-label="Reset zoom" @onclick="ResetZoom" class="@Shell.Cn(ControlClass, "w-auto px-2 text-xs tabular-nums")">@($"{_scale * 100:0}%")</button>
+            <button type="button" aria-label="Zoom in" disabled="@(_scale >= MaxScale)" @onclick="ZoomIn" class="@ControlClass">
+                <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="M12 5v14M5 12h14" /></svg>
+            </button>
+            <button type="button" aria-label="Close" @onclick="Close" class="@ControlClass">
+                <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="M6 18L18 6M6 6l12 12" /></svg>
+            </button>
+        </div>
+        <img src="@Src" alt="@Alt" @onclick:stopPropagation="true"
+             style="transform: scale(@_scale.ToString(CultureInfo.InvariantCulture))"
+             class="max-h-[90vh] max-w-[90vw] select-none object-contain transition-transform duration-200" />
+    </div>
+}
+
+@code {
+    [Parameter] public string Src { get; set; } = "";
+    [Parameter] public string? ThumbnailSrc { get; set; }
+    [Parameter] public string Alt { get; set; } = "";
+    [Parameter] public string? ImageClass { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private const double MinScale = 0.5;
+    private const double MaxScale = 4;
+    private const string ControlClass = "inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/10 text-white transition-colors hover:bg-white/20 disabled:pointer-events-none disabled:opacity-40";
+
+    private ElementReference _overlay;
+    private bool _open;
+    private bool _focusPending;
+    private double _scale = 1;
+
+    private void Open()
+    {
+        _open = true;
+        _scale = 1;
+        _focusPending = true;
+    }
+
+    private void Close() => _open = false;
+    private void ZoomIn() => _scale = Math.Min(MaxScale, _scale + 0.25);
+    private void ZoomOut() => _scale = Math.Max(MinScale, _scale - 0.25);
+    private void ResetZoom() => _scale = 1;
+
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case "Escape": Close(); break;
+            case "+": case "=": ZoomIn(); break;
+            case "-": ZoomOut(); break;
+            case "0": ResetZoom(); break;
+        }
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_focusPending) return;
+        _focusPending = false;
+        await _overlay.FocusAsync();
+    }
+}
diff --git a/src/ShellUI.Components/Components/InputGroup.razor b/src/ShellUI.Components/Components/InputGroup.razor
new file mode 100644
index 0000000..2b3ea09
--- /dev/null
+++ b/src/ShellUI.Components/Components/InputGroup.razor
@@ -0,0 +1,38 @@
+@namespace ShellUI.Components
+
+<div class="@Shell.Cn("flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", Disabled ? "cursor-not-allowed opacity-50" : "", Class)">
+    @if (Prefix != null)
+    {
+        <span class="flex shrink-0 items-center pl-3 text-muted-foreground [&>svg]:size-4">@Prefix</span>
+    }
+    <input type="@Type"
+           value="@Value"
+           placeholder="@Placeholder"
+           disabled="@Disabled"
+           @oninput="HandleInput"
+           class="h-full min-w-0 flex-1 bg-transparent px-3 py-2 placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+           @attributes="AdditionalAttributes" />
+    @if (Suffix != null)
+    {
+        <span class="flex shrink-0 items-center pr-3 text-muted-foreground [&>svg]:size-4">@Suffix</span>
+    }
+</div>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public string Type { get; set; } = "text";
+    [Parameter] public string? Placeholder { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? Prefix { get; set; }
+    [Parameter] public RenderFragment? Suffix { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private async Task HandleInput(ChangeEventArgs e)
+    {
+        Value = e.Value?.ToString();
+        await ValueChanged.InvokeAsync(Value);
+    }
+}
diff --git a/src/ShellUI.Components/Components/Kbd.razor b/src/ShellUI.Components/Components/Kbd.razor
new file mode 100644
index 0000000..c1e5616
--- /dev/null
+++ b/src/ShellUI.Components/Components/Kbd.razor
@@ -0,0 +1,10 @@
+@namespace ShellUI.Components
+
+<kbd class="@Shell.Cn("pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium text-muted-foreground", Class)" @attributes="AdditionalAttributes">@ChildContent</kbd>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/src/ShellUI.Components/Components/Loading.razor b/src/ShellUI.Components/Components/Loading.razor
index 632167e..6e3dd00 100644
--- a/src/ShellUI.Components/Components/Loading.razor
+++ b/src/ShellUI.Components/Components/Loading.razor
@@ -1,79 +1,227 @@
 @namespace ShellUI.Components
+@using System.Globalization
 
-@if (Variant == "spinner")
-{
-    <div class="@Shell.Cn("animate-spin rounded-full border-2 border-muted border-t-primary", Size == "sm" ? "h-4 w-4" : Size == "lg" ? "h-8 w-8" : "h-6 w-6", Class)"></div>
-}
-else if (Variant == "dots")
-{
-    <div class="flex space-x-1">
-        <div class="@Shell.Cn("animate-bounce rounded-full bg-primary", Size == "sm" ? "h-2 w-2" : Size == "lg" ? "h-4 w-4" : "h-3 w-3", Class)" style="animation: bounce 1s infinite; animation-delay: 0ms;"></div>
-        <div class="@Shell.Cn("animate-bounce rounded-full bg-primary", Size == "sm" ? "h-2 w-2" : Size == "lg" ? "h-4 w-4" : "h-3 w-3", Class)" style="animation: bounce 1s infinite; animation-delay: 150ms;"></div>
-        <div class="@Shell.Cn("animate-bounce rounded-full bg-primary", Size == "sm" ? "h-2 w-2" : Size == "lg" ? "h-4 w-4" : "h-3 w-3", Class)" style="animation: bounce 1s infinite; animation-delay: 300ms;"></div>
-    </div>
-}
-else if (Variant == "pulse")
-{
-    <div class="@Shell.Cn("animate-pulse rounded-md bg-muted", Size == "sm" ? "h-4 w-16" : Size == "lg" ? "h-6 w-24" : "h-5 w-20", Class)"></div>
-}
-else if (Variant == "ring")
-{
-    <div class="@Shell.Cn("animate-spin rounded-full border-4 border-muted border-t-primary border-r-primary/50", Size == "sm" ? "h-6 w-6" : Size == "lg" ? "h-12 w-12" : "h-8 w-8", Class)"></div>
-}
-else if (Variant == "bars")
-{
-    <div class="flex items-end gap-1">
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.15s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-5 w-1" : Size == "lg" ? "h-10 w-2" : "h-8 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.3s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.45s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars 1.2s ease-in-out infinite; animation-delay: 0.6s;"></div>
-    </div>
-}
-else if (Variant == "bars-vertical")
-{
-    <div class="flex items-center gap-1">
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.15s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-5 w-1" : Size == "lg" ? "h-10 w-2" : "h-8 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.3s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.45s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.6s;"></div>
-    </div>
-}
-else if (Variant == "bars-pulse")
-{
-    <div class="flex items-center gap-1">
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.15s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-5 w-1" : Size == "lg" ? "h-10 w-2" : "h-8 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.3s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-4 w-1" : Size == "lg" ? "h-8 w-2" : "h-6 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.45s;"></div>
-        <div class="@Shell.Cn("bg-primary rounded-sm", Size == "sm" ? "h-3 w-1" : Size == "lg" ? "h-6 w-2" : "h-4 w-1.5", Class)" style="animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.6s;"></div>
-    </div>
-}
-else if (Variant == "grid")
-{
-    <div class="@Shell.Cn("grid grid-cols-3 gap-1", Size == "sm" ? "w-4 h-4" : Size == "lg" ? "w-8 h-8" : "w-6 h-6", Class)">
-        @for (int i = 0; i < 9; i++)
-        {
-            <div class="bg-primary rounded-sm animate-pulse" style="animation-delay: @(i * 0.1)s; animation-duration: 1.2s;"></div>
-        }
-    </div>
-}
-else if (Variant == "orbit")
-{
-    <div class="@Shell.Cn("relative", Size == "sm" ? "h-6 w-6" : Size == "lg" ? "h-12 w-12" : "h-8 w-8", Class)">
-        <div class="absolute inset-0 rounded-full border-2 border-primary/20"></div>
-        <div class="@Shell.Cn("absolute top-0 left-1/2 -translate-x-1/2 rounded-full bg-primary animate-spin", Size == "sm" ? "h-1.5 w-1.5" : Size == "lg" ? "h-3 w-3" : "h-2 w-2")" style="transform-origin: center calc(50% + @(Size == "sm" ? "0.75rem" : Size == "lg" ? "1.5rem" : "1rem"));"></div>
-    </div>
-}
+<span role="status" aria-label="@Label"
+      class="@Shell.Cn("shellui-loading inline-flex shrink-0 items-center justify-center", Variant is "shimmer" or "logo" ? "text-foreground" : "text-primary", Variant == "progress" ? "w-full" : "", Class)"
+      @attributes="AdditionalAttributes">
+    @switch (Variant)
+    {
+        case "dots":
+        case "typing":
+        case "wave":
+            <span class="flex items-center" style="height:@Px(S);gap:@Px(U * 0.5)">
+                @for (var i = 0; i < (Variant == "wave" ? 5 : 3); i++)
+                {
+                    <span class="block rounded-full bg-current" style="width:@Px(U);height:@Px(U);animation:@DotAnimation(i)"></span>
+                }
+            </span>
+            break;
+
+        case "pulse":
+            <span class="block rounded-md bg-muted" style="width:@Px(S * 3.5);height:@Px(S * 0.75);animation:shellui-loading-fade 1.6s ease-in-out infinite"></span>
+            break;
+
+        case "ring":
+            <svg viewBox="0 0 50 50" style="width:@Px(S);height:@Px(S);animation:shellui-loading-spin 1.4s linear infinite">
+                <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-opacity="0.15" stroke-width="5" />
+                <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" style="animation:shellui-loading-arc 1.4s ease-in-out infinite" />
+            </svg>
+            break;
+
+        case "bars":
+        case "bars-vertical":
+        case "bars-pulse":
+            <span class="flex items-center" style="height:@Px(S);gap:@Px(S / 10)">
+                @for (var i = 0; i < 5; i++)
+                {
+                    <span class="block h-full rounded-full bg-current" style="width:@Px(S / 8);@BarStyle(i)"></span>
+                }
+            </span>
+            break;
+
+        case "grid":
+        case "snake":
+        case "rows":
+        case "columns":
+        case "sequence":
+        case "twinkle":
+            <span class="grid grid-cols-3" style="width:@Px(S);height:@Px(S);gap:@Px(S / 12)">
+                @for (var i = 0; i < 9; i++)
+                {
+                    <span class="block rounded-[2px] bg-current" style="@CellStyle(i)"></span>
+                }
+            </span>
+            break;
+
+        case "logo":
+            <span class="grid grid-cols-5" style="width:@Px(S * 1.25);height:@Px(S * 1.25);gap:@Px(S / 16)">
+                @for (var i = 0; i < 25; i++)
+                {
+                    <span class="block rounded-full bg-current" style="@LogoCellStyle(i)"></span>
+                }
+            </span>
+            break;
+
+        case "orbit":
+            <svg viewBox="0 0 24 24" style="width:@Px(S);height:@Px(S);animation:shellui-loading-spin 1s linear infinite">
+                <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.15" stroke-width="2" />
+                <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.45" stroke-width="2" stroke-linecap="round" stroke-dasharray="14 42.55" stroke-dashoffset="-28.3" />
+                <circle cx="12" cy="3" r="2.5" fill="currentColor" />
+            </svg>
+            break;
+
+        case "activity":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                @for (var i = 0; i < 12; i++)
+                {
+                    <span class="absolute left-1/2 top-0 block rounded-full bg-current"
+                          style="width:@Px(Math.Max(1.5, S * 0.08));height:@Px(S * 0.28);margin-left:@Px(-Math.Max(1.5, S * 0.08) / 2);transform:rotate(@(i * 30)deg);transform-origin:50% @Px(S / 2);animation:shellui-loading-spoke 1s linear @Sec(i / 12.0 - 1) infinite"></span>
+                }
+            </span>
+            break;
+
+        case "chase":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                @for (var i = 0; i < 8; i++)
+                {
+                    <span class="absolute inset-0 block" style="transform:rotate(@(i * 45)deg)">
+                        <span class="absolute left-1/2 top-0 block rounded-full bg-current"
+                              style="width:@Px(S * 0.2);height:@Px(S * 0.2);margin-left:@Px(-S * 0.1);animation:shellui-loading-chase 1s ease-in-out @Sec(i / 8.0 - 1) infinite"></span>
+                    </span>
+                }
+            </span>
+            break;
+
+        case "dual-ring":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                <svg viewBox="0 0 50 50" class="absolute inset-0" style="width:100%;height:100%;animation:shellui-loading-spin 1.2s linear infinite">
+                    <circle cx="25" cy="25" r="21" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="66 132" />
+                </svg>
+                <svg viewBox="0 0 50 50" class="absolute" style="inset:25%;width:50%;height:50%;animation:shellui-loading-spin 0.9s linear infinite reverse">
+                    <circle cx="25" cy="25" r="19" fill="none" stroke="currentColor" stroke-opacity="0.6" stroke-width="7" stroke-linecap="round" stroke-dasharray="60 120" />
+                </svg>
+            </span>
+            break;
+
+        case "ripple":
+            <span class="relative block" style="width:@Px(S);height:@Px(S)">
+                <span class="absolute inset-0 rounded-full" style="border:@Px(Border) solid currentColor;animation:shellui-loading-ripple 1.4s cubic-bezier(0,0.2,0.8,1) infinite"></span>
+                <span class="absolute inset-0 rounded-full" style="border:@Px(Border) solid currentColor;animation:shellui-loading-ripple 1.4s cubic-bezier(0,0.2,0.8,1) -0.7s infinite"></span>
+            </span>
+            break;
+
+        case "progress":
+            <span class="relative block w-full overflow-hidden rounded-full" style="height:@Px(Size == "sm" ? 2 : Size == "lg" ? 6 : 4);background:color-mix(in oklab, currentColor 15%, transparent)">
+                <span class="absolute inset-y-0 left-0 block w-2/5 rounded-full bg-current" style="animation:shellui-loading-progress 1.4s cubic-bezier(0.65,0.05,0.36,1) infinite"></span>
+            </span>
+            break;
+
+        case "shimmer":
+            <span class="@Shell.Cn("font-medium", Size == "sm" ? "text-xs" : Size == "lg" ? "text-base" : "text-sm")"
+                  style="background-image:linear-gradient(90deg, color-mix(in oklab, currentColor 35%, transparent) 25%, currentColor 50%, color-mix(in oklab, currentColor 35%, transparent) 75%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shellui-loading-shimmer 2s linear infinite">@(Text ?? "Loading...")</span>
+            break;
+
+        default:
+            <span class="block rounded-full" style="width:@Px(S);height:@Px(S);border:@Px(Border) solid color-mix(in oklab, currentColor 20%, transparent);border-top-color:currentColor;animation:shellui-loading-spin 0.75s linear infinite"></span>
+            break;
+    }
+</span>
+
+<style>
+    @@keyframes shellui-loading-spin { to { transform: rotate(360deg); } }
+    @@keyframes shellui-loading-arc { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
+    @@keyframes shellui-loading-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-80%); opacity: 1; } }
+    @@keyframes shellui-loading-typing { 0%, 60%, 100% { transform: scale(.75); opacity: .25; } 30% { transform: scale(1); opacity: 1; } }
+    @@keyframes shellui-loading-wave { 0%, 100% { transform: translateY(70%); } 50% { transform: translateY(-70%); } }
+    @@keyframes shellui-loading-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+    @@keyframes shellui-loading-bars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
+    @@keyframes shellui-loading-bars-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
+    @@keyframes shellui-loading-grid { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 35% { transform: scale(.35); opacity: .35; } }
+    @@keyframes shellui-loading-trail { 0% { opacity: 1; } 75%, 100% { opacity: .12; } }
+    @@keyframes shellui-loading-logo-on { 0%, 35%, 100% { opacity: 1; } 50%, 85% { opacity: .1; } }
+    @@keyframes shellui-loading-logo-off { 0%, 35%, 100% { opacity: .1; } 50%, 85% { opacity: 1; } }
+    @@keyframes shellui-loading-spoke { 0% { opacity: 1; } 100% { opacity: .15; } }
+    @@keyframes shellui-loading-chase { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.35); opacity: .2; } }
+    @@keyframes shellui-loading-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
+    @@keyframes shellui-loading-ripple { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
+    @@keyframes shellui-loading-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
+    @@keyframes shellui-loading-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+    @@media (prefers-reduced-motion: reduce) { .shellui-loading * { animation-duration: 2.5s !important; } }
+</style>
 
 @code {
-    [Parameter]
-    public string Variant { get; set; } = "spinner";
+    [Parameter] public string Variant { get; set; } = "spinner";
+    [Parameter] public string Size { get; set; } = "default";
+    [Parameter] public string Label { get; set; } = "Loading";
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    // Clockwise path around the 3x3 grid; the centre cell stays dim.
+    private static readonly int[] SnakePath = { 0, 1, 2, 5, 8, 7, 6, 3 };
+    private static readonly double[] TwinkleDelays = { 0.2, 0.9, 0.5, 1.2, 0.1, 0.7, 1.4, 0.3, 1.0 };
+
+    // The ShellUI mark: a prompt chevron beside a cursor bar.
+    private static readonly bool[] LogoPattern =
+    {
+        true,  false, false, false, true,
+        false, true,  false, false, true,
+        false, false, true,  false, true,
+        false, true,  false, false, true,
+        true,  false, false, false, true,
+    };
+
+    private double S => Size switch { "sm" => 16, "lg" => 40, _ => 24 };
+    private double U => S / 4;
+    private double Border => Math.Max(2, Math.Round(S / 10));
+
+    private static string Px(double value) => value.ToString("0.##", CultureInfo.InvariantCulture) + "px";
+    private static string Sec(double value) => value.ToString("0.###", CultureInfo.InvariantCulture) + "s";
+
+    private string DotAnimation(int i) => Variant switch
+    {
+        "typing" => $"shellui-loading-typing 1.4s ease-in-out {Sec(i * 0.2)} infinite",
+        "wave" => $"shellui-loading-wave 1s ease-in-out {Sec(i * 0.1 - 1)} infinite",
+        _ => $"shellui-loading-bounce 1.2s ease-in-out {Sec(i * 0.16)} infinite"
+    };
+
+    private string BarStyle(int i) => Variant switch
+    {
+        "bars-pulse" => $"animation:shellui-loading-bars-fade 1s ease-in-out {Sec(i * 0.12)} infinite",
+        "bars-vertical" => $"transform-origin:center;animation:shellui-loading-bars 1s ease-in-out {Sec(i * 0.12)} infinite",
+        _ => $"transform-origin:bottom;animation:shellui-loading-bars 1s ease-in-out {Sec(i * 0.12)} infinite"
+    };
+
+    private string CellStyle(int i)
+    {
+        int row = i / 3, column = i % 3;
+        switch (Variant)
+        {
+            case "grid":
+                return $"animation:shellui-loading-grid 1.3s ease-in-out {Sec((row + column) * 0.1)} infinite";
+            case "rows":
+                return Trail(row, 3, 1.2);
+            case "columns":
+                return Trail(column, 3, 1.2);
+            case "sequence":
+                return Trail(i, 9, 1.35);
+            case "twinkle":
+                return $"animation:shellui-loading-twinkle 1.6s ease-in-out {Sec(TwinkleDelays[i] - 1.6)} infinite";
+            default:
+                var step = Array.IndexOf(SnakePath, i);
+                return step < 0 ? "opacity:.12" : Trail(step, 8, 1);
+        }
+    }
 
-    [Parameter]
-    public string Size { get; set; } = "default";
+    private static string LogoCellStyle(int i)
+    {
+        var on = LogoPattern[i];
+        var delay = ((i / 5) + (i % 5)) * 0.05;
+        return $"opacity:{(on ? "1" : ".1")};animation:shellui-loading-logo-{(on ? "on" : "off")} 2.4s ease-in-out {Sec(delay)} infinite";
+    }
 
-    [Parameter]
-    public string Class { get; set; } = "";
+    // Each step lights up in turn and fades while the next one brightens.
+    private static string Trail(int step, int steps, double duration) =>
+        $"animation:shellui-loading-trail {Sec(duration)} linear {Sec(step * duration / steps - duration)} infinite";
 }
diff --git a/src/ShellUI.Components/Components/NumberInput.razor b/src/ShellUI.Components/Components/NumberInput.razor
new file mode 100644
index 0000000..bf11d0d
--- /dev/null
+++ b/src/ShellUI.Components/Components/NumberInput.razor
@@ -0,0 +1,67 @@
+@namespace ShellUI.Components
+@using System.Globalization
+
+<div class="@Shell.Cn("flex h-10 w-full items-center overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", Disabled ? "opacity-50" : "", Class)">
+    <button type="button" aria-label="Decrease" disabled="@(Disabled || AtMin)" @onclick="DecrementAsync"
+            class="flex h-full w-10 shrink-0 items-center justify-center border-r border-input text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50">
+        <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 12h14" />
+        </svg>
+    </button>
+    <input type="number"
+           inputmode="decimal"
+           value="@Format(Value)"
+           min="@Format(Min)"
+           max="@Format(Max)"
+           step="@Format(Step)"
+           disabled="@Disabled"
+           @onchange="HandleChangeAsync"
+           class="h-full min-w-0 flex-1 bg-transparent px-2 text-center tabular-nums focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+           @attributes="AdditionalAttributes" />
+    <button type="button" aria-label="Increase" disabled="@(Disabled || AtMax)" @onclick="IncrementAsync"
+            class="flex h-full w-10 shrink-0 items-center justify-center border-l border-input text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50">
+        <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="M12 5v14M5 12h14" />
+        </svg>
+    </button>
+</div>
+
+@code {
+    [Parameter] public decimal? Value { get; set; }
+    [Parameter] public EventCallback<decimal?> ValueChanged { get; set; }
+    [Parameter] public decimal? Min { get; set; }
+    [Parameter] public decimal? Max { get; set; }
+    [Parameter] public decimal Step { get; set; } = 1;
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool AtMin => Min.HasValue && Value.HasValue && Value <= Min;
+    private bool AtMax => Max.HasValue && Value.HasValue && Value >= Max;
+
+    private static string? Format(decimal? value) => value?.ToString(CultureInfo.InvariantCulture);
+
+    private Task DecrementAsync() => SetAsync((Value ?? Min ?? 0) - Step);
+    private Task IncrementAsync() => SetAsync((Value ?? Min ?? 0) + Step);
+
+    private Task HandleChangeAsync(ChangeEventArgs e)
+    {
+        var text = e.Value?.ToString();
+        if (string.IsNullOrWhiteSpace(text)) return SetAsync(null);
+        return decimal.TryParse(text, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed)
+            ? SetAsync(parsed)
+            : SetAsync(Value);
+    }
+
+    private async Task SetAsync(decimal? value)
+    {
+        if (value.HasValue)
+        {
+            if (Min.HasValue && value < Min) value = Min;
+            if (Max.HasValue && value > Max) value = Max;
+        }
+        Value = value;
+        await ValueChanged.InvokeAsync(value);
+    }
+}
diff --git a/src/ShellUI.Components/Components/QrCode.razor b/src/ShellUI.Components/Components/QrCode.razor
new file mode 100644
index 0000000..3d9020d
--- /dev/null
+++ b/src/ShellUI.Components/Components/QrCode.razor
@@ -0,0 +1,72 @@
+@namespace ShellUI.Components
+@using System.Text
+@using QRCoder
+
+@if (_moduleCount > 0)
+{
+    <svg xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 @_moduleCount @_moduleCount"
+         width="@Size"
+         height="@Size"
+         shape-rendering="crispEdges"
+         role="img"
+         aria-label="@(Label ?? Value)"
+         class="@Shell.Cn("rounded-md", Class)"
+         @attributes="AdditionalAttributes">
+        <rect width="100%" height="100%" fill="@Background" />
+        <path d="@_path" fill="@Foreground" />
+    </svg>
+}
+
+@code {
+    [Parameter] public string Value { get; set; } = "";
+    [Parameter] public int Size { get; set; } = 160;
+    [Parameter] public string ErrorCorrection { get; set; } = "M";
+    [Parameter] public string Foreground { get; set; } = "#000000";
+    [Parameter] public string Background { get; set; } = "#ffffff";
+    [Parameter] public string? Label { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string _path = "";
+    private int _moduleCount;
+    private string? _renderedKey;
+
+    protected override void OnParametersSet()
+    {
+        var key = ErrorCorrection + "|" + Value;
+        if (key == _renderedKey) return;
+        _renderedKey = key;
+
+        if (string.IsNullOrEmpty(Value))
+        {
+            _moduleCount = 0;
+            _path = "";
+            return;
+        }
+
+        var level = ErrorCorrection.ToUpperInvariant() switch
+        {
+            "L" => QRCodeGenerator.ECCLevel.L,
+            "Q" => QRCodeGenerator.ECCLevel.Q,
+            "H" => QRCodeGenerator.ECCLevel.H,
+            _ => QRCodeGenerator.ECCLevel.M
+        };
+
+        using var generator = new QRCodeGenerator();
+        using var data = generator.CreateQrCode(Value, level);
+        var matrix = data.ModuleMatrix;
+        _moduleCount = matrix.Count;
+
+        var path = new StringBuilder();
+        for (var y = 0; y < matrix.Count; y++)
+        {
+            for (var x = 0; x < matrix[y].Count; x++)
+            {
+                if (matrix[y][x]) path.Append('M').Append(x).Append(',').Append(y).Append("h1v1h-1z");
+            }
+        }
+        _path = path.ToString();
+    }
+}
diff --git a/src/ShellUI.Components/Components/RadarChart.razor b/src/ShellUI.Components/Components/RadarChart.razor
index a719c9d..f655cce 100644
--- a/src/ShellUI.Components/Components/RadarChart.razor
+++ b/src/ShellUI.Components/Components/RadarChart.razor
@@ -27,11 +27,12 @@
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
-        // Radar tooltips only trigger per point, not in shared mode.
+        // Radar tooltips only trigger per point, and without FollowCursor they are pinned to the top of the chart.
         if (ChartOptions.Tooltip != null)
         {
             ChartOptions.Tooltip.Shared = false;
             ChartOptions.Tooltip.Intersect = true;
+            ChartOptions.Tooltip.FollowCursor = true;
         }
     }
 }
diff --git a/src/ShellUI.Components/Components/SheetContent.razor b/src/ShellUI.Components/Components/SheetContent.razor
index ccd9d70..bcc6426 100644
--- a/src/ShellUI.Components/Components/SheetContent.razor
+++ b/src/ShellUI.Components/Components/SheetContent.razor
@@ -6,7 +6,7 @@
 @if (Parent?.Open == true)
 {
     <div class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm animate-in fade-in-0" @onclick="Close"></div>
-    <div class="@SheetVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
+    <div @ref="_content" tabindex="-1" role="dialog" aria-modal="true" @onkeydown="OnKeyDownAsync" class="outline-none @SheetVariants.Get(Parent.Side, Class)" @attributes="AdditionalAttributes">
         <div class="flex flex-col gap-4 p-6">
             @ChildContent
         </div>
@@ -21,14 +21,29 @@
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Parent?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Parent?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/src/ShellUI.Components/Components/StatCard.razor b/src/ShellUI.Components/Components/StatCard.razor
new file mode 100644
index 0000000..c145ad1
--- /dev/null
+++ b/src/ShellUI.Components/Components/StatCard.razor
@@ -0,0 +1,43 @@
+@namespace ShellUI.Components
+
+<div class="@Shell.Cn("rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm", Class)" @attributes="AdditionalAttributes">
+    <div class="flex items-center justify-between gap-2">
+        <p class="text-sm font-medium text-muted-foreground">@Title</p>
+        @if (Icon != null)
+        {
+            <span class="flex text-muted-foreground [&>svg]:size-4">@Icon</span>
+        }
+    </div>
+    <div class="mt-2 flex flex-wrap items-baseline gap-2">
+        <p class="text-2xl font-bold tracking-tight tabular-nums">@Value</p>
+        @if (!string.IsNullOrEmpty(Change))
+        {
+            <span class="@Shell.Cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium", ChangeClass)">@Change</span>
+        }
+    </div>
+    @if (!string.IsNullOrEmpty(Description))
+    {
+        <p class="mt-1 text-xs text-muted-foreground">@Description</p>
+    }
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public string? Change { get; set; }
+    [Parameter] public string Trend { get; set; } = "neutral";
+    [Parameter] public string? Description { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ChangeClass => Trend.ToLowerInvariant() switch
+    {
+        "up" => "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+        "down" => "bg-red-500/10 text-red-600 dark:text-red-400",
+        _ => "bg-muted text-muted-foreground"
+    };
+}
diff --git a/src/ShellUI.Components/Components/Timeline.razor b/src/ShellUI.Components/Components/Timeline.razor
new file mode 100644
index 0000000..e9739c1
--- /dev/null
+++ b/src/ShellUI.Components/Components/Timeline.razor
@@ -0,0 +1,12 @@
+@namespace ShellUI.Components
+
+<ol class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
+    @ChildContent
+</ol>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/src/ShellUI.Components/Components/TimelineItem.razor b/src/ShellUI.Components/Components/TimelineItem.razor
new file mode 100644
index 0000000..b2a0827
--- /dev/null
+++ b/src/ShellUI.Components/Components/TimelineItem.razor
@@ -0,0 +1,39 @@
+@namespace ShellUI.Components
+
+<li class="@Shell.Cn("group relative flex gap-3 pb-8 last:pb-0", Class)" @attributes="AdditionalAttributes">
+    <span aria-hidden="true" class="absolute bottom-0 left-3.5 top-0 w-px -translate-x-1/2 bg-border group-first:top-3.5 group-last:bottom-auto group-last:h-3.5 group-only:hidden"></span>
+    <div class="relative z-10 flex h-7 w-7 shrink-0 items-center justify-center">
+        @if (Icon != null)
+        {
+            <span class="@Shell.Cn("flex h-7 w-7 items-center justify-center rounded-full border bg-background [&>svg]:size-3.5", Active ? "border-primary text-primary" : "border-border text-muted-foreground")">@Icon</span>
+        }
+        else
+        {
+            <span class="@Shell.Cn("h-2.5 w-2.5 rounded-full", Active ? "bg-primary ring-4 ring-primary/20" : "bg-muted-foreground")"></span>
+        }
+    </div>
+    <div class="min-w-0 flex-1">
+        <div class="flex min-h-7 flex-wrap items-center gap-x-2">
+            <h3 class="text-sm font-semibold text-foreground">@Title</h3>
+            @if (!string.IsNullOrEmpty(Time))
+            {
+                <time class="text-xs text-muted-foreground">@Time</time>
+            }
+        </div>
+        @if (ChildContent != null)
+        {
+            <div class="text-sm text-muted-foreground">@ChildContent</div>
+        }
+    </div>
+</li>
+
+@code {
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Time { get; set; }
+    [Parameter] public bool Active { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
diff --git a/src/ShellUI.Components/Components/ToggleGroup.razor b/src/ShellUI.Components/Components/ToggleGroup.razor
new file mode 100644
index 0000000..881ff1c
--- /dev/null
+++ b/src/ShellUI.Components/Components/ToggleGroup.razor
@@ -0,0 +1,45 @@
+@namespace ShellUI.Components
+
+<CascadingValue Value="this" IsFixed="true">
+    <div role="@(Multiple ? "group" : "radiogroup")" class="@Shell.Cn("inline-flex items-center gap-1", Class)" @attributes="AdditionalAttributes">
+        @ChildContent
+    </div>
+</CascadingValue>
+
+@code {
+    [Parameter] public bool Multiple { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public List<string> Values { get; set; } = new();
+    [Parameter] public EventCallback<List<string>> ValuesChanged { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private readonly List<ToggleGroupItem> _items = new();
+
+    internal void Register(ToggleGroupItem item) => _items.Add(item);
+    internal void Unregister(ToggleGroupItem item) => _items.Remove(item);
+
+    public bool IsPressed(string value) => Multiple ? Values.Contains(value) : Value == value;
+
+    public async Task ToggleAsync(string value)
+    {
+        if (Multiple)
+        {
+            var next = new List<string>(Values);
+            if (!next.Remove(value)) next.Add(value);
+            Values = next;
+            await ValuesChanged.InvokeAsync(next);
+        }
+        else
+        {
+            Value = Value == value ? null : value;
+            await ValueChanged.InvokeAsync(Value);
+        }
+
+        foreach (var item in _items.ToArray()) item.Refresh();
+    }
+}
diff --git a/src/ShellUI.Components/Components/ToggleGroupItem.razor b/src/ShellUI.Components/Components/ToggleGroupItem.razor
new file mode 100644
index 0000000..1d0f194
--- /dev/null
+++ b/src/ShellUI.Components/Components/ToggleGroupItem.razor
@@ -0,0 +1,37 @@
+@namespace ShellUI.Components
+@implements IDisposable
+
+<button type="button"
+        role="@(Group?.Multiple == true ? "checkbox" : "radio")"
+        aria-checked="@(IsPressed ? "true" : "false")"
+        data-state="@(IsPressed ? "on" : "off")"
+        disabled="@IsDisabled"
+        @onclick="ToggleAsync"
+        class="@Shell.Cn("inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-md px-2.5 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4", IsPressed ? "bg-accent text-accent-foreground" : "bg-transparent", Class)"
+        @attributes="AdditionalAttributes">
+    @ChildContent
+</button>
+
+@code {
+    [CascadingParameter] public ToggleGroup? Group { get; set; }
+    [Parameter] public string Value { get; set; } = "";
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsPressed => Group?.IsPressed(Value) == true;
+    private bool IsDisabled => Disabled || Group?.Disabled == true;
+
+    protected override void OnInitialized() => Group?.Register(this);
+
+    internal void Refresh() => InvokeAsync(StateHasChanged);
+
+    private async Task ToggleAsync()
+    {
+        if (Group != null) await Group.ToggleAsync(Value);
+    }
+
+    public void Dispose() => Group?.Unregister(this);
+}
diff --git a/src/ShellUI.Components/Components/TreeView.razor b/src/ShellUI.Components/Components/TreeView.razor
new file mode 100644
index 0000000..a48e66d
--- /dev/null
+++ b/src/ShellUI.Components/Components/TreeView.razor
@@ -0,0 +1,28 @@
+@namespace ShellUI.Components
+
+<CascadingValue Value="this" IsFixed="true">
+    <ul role="tree" class="@Shell.Cn("space-y-0.5 text-sm", Class)" @attributes="AdditionalAttributes">
+        @ChildContent
+    </ul>
+</CascadingValue>
+
+@code {
+    [Parameter] public string? SelectedValue { get; set; }
+    [Parameter] public EventCallback<string?> SelectedValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private readonly List<TreeViewItem> _items = new();
+
+    internal void Register(TreeViewItem item) => _items.Add(item);
+    internal void Unregister(TreeViewItem item) => _items.Remove(item);
+
+    public async Task SelectAsync(string value)
+    {
+        SelectedValue = value;
+        await SelectedValueChanged.InvokeAsync(value);
+        foreach (var item in _items.ToArray()) item.Refresh();
+    }
+}
diff --git a/src/ShellUI.Components/Components/TreeViewItem.razor b/src/ShellUI.Components/Components/TreeViewItem.razor
new file mode 100644
index 0000000..4f27696
--- /dev/null
+++ b/src/ShellUI.Components/Components/TreeViewItem.razor
@@ -0,0 +1,68 @@
+@namespace ShellUI.Components
+@implements IDisposable
+
+<li role="treeitem"
+    aria-expanded="@(HasChildren ? (_expanded ? "true" : "false") : null)"
+    aria-selected="@(IsSelected ? "true" : "false")"
+    class="@Shell.Cn(Class)"
+    @attributes="AdditionalAttributes">
+    <button type="button" disabled="@Disabled" @onclick="HandleClickAsync"
+            class="@Shell.Cn("flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", IsSelected ? "bg-accent font-medium text-accent-foreground" : "text-foreground hover:bg-muted")">
+        @if (HasChildren)
+        {
+            <svg class="@Shell.Cn("h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200", _expanded ? "rotate-90" : "")" 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="M9 5l7 7-7 7" />
+            </svg>
+        }
+        else
+        {
+            <span class="w-4 shrink-0"></span>
+        }
+        @if (Icon != null)
+        {
+            <span class="flex shrink-0 text-muted-foreground [&>svg]:size-4">@Icon</span>
+        }
+        <span class="truncate">@Label</span>
+    </button>
+    @if (HasChildren && _expanded)
+    {
+        <ul role="group" class="ml-4 mt-0.5 space-y-0.5 border-l border-border pl-2">
+            @ChildContent
+        </ul>
+    }
+</li>
+
+@code {
+    [CascadingParameter] public TreeView? Tree { get; set; }
+    [Parameter] public string Label { get; set; } = "";
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public bool DefaultExpanded { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool _expanded;
+
+    private string EffectiveValue => Value ?? Label;
+    private bool HasChildren => ChildContent != null;
+    private bool IsSelected => Tree?.SelectedValue == EffectiveValue;
+
+    protected override void OnInitialized()
+    {
+        _expanded = DefaultExpanded;
+        Tree?.Register(this);
+    }
+
+    internal void Refresh() => InvokeAsync(StateHasChanged);
+
+    private async Task HandleClickAsync()
+    {
+        if (HasChildren) _expanded = !_expanded;
+        if (Tree != null) await Tree.SelectAsync(EffectiveValue);
+    }
+
+    public void Dispose() => Tree?.Unregister(this);
+}
diff --git a/src/ShellUI.Components/Models/CommandModels.cs b/src/ShellUI.Components/Models/CommandModels.cs
index f2f68ef..76a5118 100644
--- a/src/ShellUI.Components/Models/CommandModels.cs
+++ b/src/ShellUI.Components/Models/CommandModels.cs
@@ -6,6 +6,7 @@ public class CommandItem
     public string? Description { get; set; }
     public string? Icon { get; set; }
     public string? Shortcut { get; set; }
+    public string? Group { get; set; }
     public Func<Task>? Action { get; set; }
 }
 
diff --git a/src/ShellUI.Components/README.md b/src/ShellUI.Components/README.md
index a0f8a25..a07aede 100644
--- a/src/ShellUI.Components/README.md
+++ b/src/ShellUI.Components/README.md
@@ -68,7 +68,7 @@ The package also serves static assets, including `shellui.js`, from `_content/Sh
 
 ## Component inventory
 
-The CLI registry contains **176 entries**: **76 direct install targets** and **100 hidden dependency entries**. The CLI displays the 76 direct targets and resolves hidden entries recursively.
+The CLI registry contains **194 entries**: **90 direct install targets** and **104 hidden dependency entries**. The CLI displays the 90 direct targets and resolves hidden entries recursively.
 
 `0.3.0-rc.2` adds `typed-select`, `command-palette`, `data-picker`, `multi-select`, `tag-input`, `donut-chart`, `radar-chart`, and `radial-chart`. Use the CLI's `list` command for the complete direct-target inventory.
 
diff --git a/src/ShellUI.Components/ShellUI.Components.csproj b/src/ShellUI.Components/ShellUI.Components.csproj
index 914b43d..1f26944 100644
--- a/src/ShellUI.Components/ShellUI.Components.csproj
+++ b/src/ShellUI.Components/ShellUI.Components.csproj
@@ -32,6 +32,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.0" />
     <PackageReference Include="System.Linq.Dynamic.Core" Version="1.7.1" />
     <PackageReference Include="Blazor-ApexCharts" Version="6.0.2" />
+    <PackageReference Include="QRCoder" Version="1.8.0" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/src/ShellUI.Components/build/ShellUI.Components.targets b/src/ShellUI.Components/build/ShellUI.Components.targets
index 2e6a434..cf4266f 100644
--- a/src/ShellUI.Components/build/ShellUI.Components.targets
+++ b/src/ShellUI.Components/build/ShellUI.Components.targets
@@ -2,8 +2,8 @@
   <!-- AUTO-GENERATED by tools/ShellUI.SafelistGenerator. Do not edit by hand. -->
   <ItemGroup>
     <ShellUISafelistEntry Include="align-middle" />
+    <ShellUISafelistEntry Include="animate-bounce" />
     <ShellUISafelistEntry Include="animate-in" />
-    <ShellUISafelistEntry Include="animate-pulse" />
     <ShellUISafelistEntry Include="animate-spin" />
     <ShellUISafelistEntry Include="appearance-none" />
     <ShellUISafelistEntry Include="aspect-square" />
@@ -13,14 +13,17 @@
     <ShellUISafelistEntry Include="bg-background" />
     <ShellUISafelistEntry Include="bg-background/80" />
     <ShellUISafelistEntry Include="bg-background/95" />
+    <ShellUISafelistEntry Include="bg-black/50" />
     <ShellUISafelistEntry Include="bg-black/80" />
     <ShellUISafelistEntry Include="bg-blue-500" />
     <ShellUISafelistEntry Include="bg-border" />
     <ShellUISafelistEntry Include="bg-card" />
+    <ShellUISafelistEntry Include="bg-current" />
     <ShellUISafelistEntry Include="bg-destructive" />
     <ShellUISafelistEntry Include="bg-green-500" />
     <ShellUISafelistEntry Include="bg-muted" />
     <ShellUISafelistEntry Include="bg-muted/30" />
+    <ShellUISafelistEntry Include="bg-muted/40" />
     <ShellUISafelistEntry Include="bg-popover" />
     <ShellUISafelistEntry Include="bg-primary" />
     <ShellUISafelistEntry Include="bg-secondary" />
@@ -29,14 +32,12 @@
     <ShellUISafelistEntry Include="bg-transparent" />
     <ShellUISafelistEntry Include="bg-yellow-500" />
     <ShellUISafelistEntry Include="border-0" />
-    <ShellUISafelistEntry Include="border-2" />
     <ShellUISafelistEntry Include="border-b" />
     <ShellUISafelistEntry Include="border-border" />
     <ShellUISafelistEntry Include="border-border/40" />
     <ShellUISafelistEntry Include="border-destructive" />
     <ShellUISafelistEntry Include="border-input" />
     <ShellUISafelistEntry Include="border-l" />
-    <ShellUISafelistEntry Include="border-primary/20" />
     <ShellUISafelistEntry Include="border-r" />
     <ShellUISafelistEntry Include="border-t" />
     <ShellUISafelistEntry Include="border-transparent" />
@@ -60,10 +61,12 @@
     <ShellUISafelistEntry Include="disabled:cursor-not-allowed" />
     <ShellUISafelistEntry Include="disabled:opacity-50" />
     <ShellUISafelistEntry Include="disabled:pointer-events-none" />
+    <ShellUISafelistEntry Include="duration-150" />
     <ShellUISafelistEntry Include="duration-200" />
     <ShellUISafelistEntry Include="duration-300" />
     <ShellUISafelistEntry Include="ease-[cubic-bezier(0.4,0,0.2,1)]" />
     <ShellUISafelistEntry Include="ease-in-out" />
+    <ShellUISafelistEntry Include="ease-out" />
     <ShellUISafelistEntry Include="fa-bell" />
     <ShellUISafelistEntry Include="fa-chevron-right" />
     <ShellUISafelistEntry Include="fa-circle-check" />
@@ -82,6 +85,7 @@
     <ShellUISafelistEntry Include="file:font-medium" />
     <ShellUISafelistEntry Include="file:text-sm" />
     <ShellUISafelistEntry Include="fill-primary-foreground" />
+    <ShellUISafelistEntry Include="first:pt-1.5" />
     <ShellUISafelistEntry Include="flex-1" />
     <ShellUISafelistEntry Include="flex-col" />
     <ShellUISafelistEntry Include="flex-col-reverse" />
@@ -119,7 +123,10 @@
     <ShellUISafelistEntry Include="gap-2" />
     <ShellUISafelistEntry Include="gap-3" />
     <ShellUISafelistEntry Include="gap-4" />
+    <ShellUISafelistEntry Include="gap-x-2" />
     <ShellUISafelistEntry Include="grid-cols-2" />
+    <ShellUISafelistEntry Include="grid-cols-3" />
+    <ShellUISafelistEntry Include="grid-cols-5" />
     <ShellUISafelistEntry Include="grid-cols-7" />
     <ShellUISafelistEntry Include="grid-rows-[0fr]" />
     <ShellUISafelistEntry Include="group-data-[collapsible=icon]:!flex" />
@@ -133,6 +140,11 @@
     <ShellUISafelistEntry Include="group-data-[variant=floating]:border-sidebar-border" />
     <ShellUISafelistEntry Include="group-data-[variant=floating]:rounded-lg" />
     <ShellUISafelistEntry Include="group-data-[variant=floating]:shadow" />
+    <ShellUISafelistEntry Include="group-first:top-3.5" />
+    <ShellUISafelistEntry Include="group-last:bottom-auto" />
+    <ShellUISafelistEntry Include="group-last:h-3.5" />
+    <ShellUISafelistEntry Include="group-only:hidden" />
+    <ShellUISafelistEntry Include="h-1.5" />
     <ShellUISafelistEntry Include="h-1/2" />
     <ShellUISafelistEntry Include="h-10" />
     <ShellUISafelistEntry Include="h-11" />
@@ -175,8 +187,8 @@
     <ShellUISafelistEntry Include="inset-0" />
     <ShellUISafelistEntry Include="inset-x-0" />
     <ShellUISafelistEntry Include="inset-y-0" />
+    <ShellUISafelistEntry Include="items-baseline" />
     <ShellUISafelistEntry Include="items-center" />
-    <ShellUISafelistEntry Include="items-end" />
     <ShellUISafelistEntry Include="items-start" />
     <ShellUISafelistEntry Include="justify-between" />
     <ShellUISafelistEntry Include="justify-center" />
@@ -186,26 +198,35 @@
     <ShellUISafelistEntry Include="left-0" />
     <ShellUISafelistEntry Include="left-1/2" />
     <ShellUISafelistEntry Include="left-2" />
+    <ShellUISafelistEntry Include="left-3.5" />
     <ShellUISafelistEntry Include="lg:space-x-8" />
     <ShellUISafelistEntry Include="list-none" />
     <ShellUISafelistEntry Include="material-symbols-outlined" />
+    <ShellUISafelistEntry Include="max-h-48" />
     <ShellUISafelistEntry Include="max-h-60" />
-    <ShellUISafelistEntry Include="max-h-[300px]" />
+    <ShellUISafelistEntry Include="max-h-[90vh]" />
+    <ShellUISafelistEntry Include="max-h-[min(360px,55vh)]" />
+    <ShellUISafelistEntry Include="max-w-[90vw]" />
     <ShellUISafelistEntry Include="max-w-sm" />
+    <ShellUISafelistEntry Include="max-w-xl" />
     <ShellUISafelistEntry Include="mb-1" />
     <ShellUISafelistEntry Include="mb-2" />
     <ShellUISafelistEntry Include="mb-4" />
     <ShellUISafelistEntry Include="mb-6" />
     <ShellUISafelistEntry Include="md:block" />
     <ShellUISafelistEntry Include="min-h-0" />
+    <ShellUISafelistEntry Include="min-h-10" />
+    <ShellUISafelistEntry Include="min-h-7" />
     <ShellUISafelistEntry Include="min-h-8" />
     <ShellUISafelistEntry Include="min-h-[80px]" />
     <ShellUISafelistEntry Include="min-w-0" />
     <ShellUISafelistEntry Include="min-w-24" />
+    <ShellUISafelistEntry Include="min-w-5" />
     <ShellUISafelistEntry Include="min-w-8" />
     <ShellUISafelistEntry Include="min-w-[640px]" />
     <ShellUISafelistEntry Include="min-w-[8rem]" />
-    <ShellUISafelistEntry Include="ml-3" />
+    <ShellUISafelistEntry Include="ml-1" />
+    <ShellUISafelistEntry Include="ml-4" />
     <ShellUISafelistEntry Include="ml-auto" />
     <ShellUISafelistEntry Include="motion-reduce:animate-none" />
     <ShellUISafelistEntry Include="motion-reduce:transition-none" />
@@ -220,6 +241,7 @@
     <ShellUISafelistEntry Include="mt-auto" />
     <ShellUISafelistEntry Include="mx-auto" />
     <ShellUISafelistEntry Include="my-1" />
+    <ShellUISafelistEntry Include="object-contain" />
     <ShellUISafelistEntry Include="object-cover" />
     <ShellUISafelistEntry Include="opacity-25" />
     <ShellUISafelistEntry Include="opacity-50" />
@@ -232,18 +254,23 @@
     <ShellUISafelistEntry Include="overflow-hidden" />
     <ShellUISafelistEntry Include="overflow-x-auto" />
     <ShellUISafelistEntry Include="overflow-y-auto" />
+    <ShellUISafelistEntry Include="overscroll-contain" />
     <ShellUISafelistEntry Include="p-0.5" />
     <ShellUISafelistEntry Include="p-1" />
+    <ShellUISafelistEntry Include="p-1.5" />
     <ShellUISafelistEntry Include="p-2" />
     <ShellUISafelistEntry Include="p-3" />
     <ShellUISafelistEntry Include="p-4" />
     <ShellUISafelistEntry Include="p-6" />
     <ShellUISafelistEntry Include="p-[3px]" />
+    <ShellUISafelistEntry Include="pb-0.5" />
+    <ShellUISafelistEntry Include="pb-1" />
     <ShellUISafelistEntry Include="pb-4" />
     <ShellUISafelistEntry Include="peer-disabled:cursor-not-allowed" />
     <ShellUISafelistEntry Include="peer-disabled:opacity-70" />
     <ShellUISafelistEntry Include="peer/menu-button" />
     <ShellUISafelistEntry Include="pl-2" />
+    <ShellUISafelistEntry Include="pl-3" />
     <ShellUISafelistEntry Include="pl-4" />
     <ShellUISafelistEntry Include="placeholder:text-muted-foreground" />
     <ShellUISafelistEntry Include="pointer-events-auto" />
@@ -253,6 +280,7 @@
     <ShellUISafelistEntry Include="pr-6" />
     <ShellUISafelistEntry Include="pr-8" />
     <ShellUISafelistEntry Include="pt-0" />
+    <ShellUISafelistEntry Include="pt-3" />
     <ShellUISafelistEntry Include="px-1" />
     <ShellUISafelistEntry Include="px-1.5" />
     <ShellUISafelistEntry Include="px-2" />
@@ -264,23 +292,29 @@
     <ShellUISafelistEntry Include="py-0.5" />
     <ShellUISafelistEntry Include="py-1" />
     <ShellUISafelistEntry Include="py-1.5" />
+    <ShellUISafelistEntry Include="py-10" />
     <ShellUISafelistEntry Include="py-2" />
+    <ShellUISafelistEntry Include="py-3" />
     <ShellUISafelistEntry Include="py-4" />
     <ShellUISafelistEntry Include="py-6" />
+    <ShellUISafelistEntry Include="resize-none" />
     <ShellUISafelistEntry Include="right-0" />
     <ShellUISafelistEntry Include="right-1" />
     <ShellUISafelistEntry Include="right-2" />
     <ShellUISafelistEntry Include="right-4" />
     <ShellUISafelistEntry Include="ring-offset-background" />
     <ShellUISafelistEntry Include="ring-sidebar-ring" />
+    <ShellUISafelistEntry Include="rounded-[2px]" />
     <ShellUISafelistEntry Include="rounded-full" />
     <ShellUISafelistEntry Include="rounded-lg" />
     <ShellUISafelistEntry Include="rounded-md" />
     <ShellUISafelistEntry Include="rounded-sm" />
+    <ShellUISafelistEntry Include="rounded-xl" />
     <ShellUISafelistEntry Include="scrollbar-thin" />
     <ShellUISafelistEntry Include="scrollbar-thumb-border" />
     <ShellUISafelistEntry Include="scrollbar-track-transparent" />
     <ShellUISafelistEntry Include="select-none" />
+    <ShellUISafelistEntry Include="shadow-2xl" />
     <ShellUISafelistEntry Include="shadow-lg" />
     <ShellUISafelistEntry Include="shadow-md" />
     <ShellUISafelistEntry Include="shadow-sm" />
@@ -302,6 +336,7 @@
     <ShellUISafelistEntry Include="slide-in-from-top" />
     <ShellUISafelistEntry Include="slide-in-from-top-2" />
     <ShellUISafelistEntry Include="sm:flex-row" />
+    <ShellUISafelistEntry Include="sm:inline-flex" />
     <ShellUISafelistEntry Include="sm:items-center" />
     <ShellUISafelistEntry Include="sm:justify-between" />
     <ShellUISafelistEntry Include="sm:max-w-sm" />
@@ -309,9 +344,14 @@
     <ShellUISafelistEntry Include="sm:text-left" />
     <ShellUISafelistEntry Include="space-x-1" />
     <ShellUISafelistEntry Include="space-x-2" />
+    <ShellUISafelistEntry Include="space-y-0.5" />
     <ShellUISafelistEntry Include="space-y-2" />
     <ShellUISafelistEntry Include="space-y-4" />
     <ShellUISafelistEntry Include="sr-only" />
+    <ShellUISafelistEntry Include="starting:opacity-0" />
+    <ShellUISafelistEntry Include="starting:scale-95" />
+    <ShellUISafelistEntry Include="tabular-nums" />
+    <ShellUISafelistEntry Include="text-2xl" />
     <ShellUISafelistEntry Include="text-5xl" />
     <ShellUISafelistEntry Include="text-[10px]" />
     <ShellUISafelistEntry Include="text-[8px]" />
@@ -340,6 +380,7 @@
     <ShellUISafelistEntry Include="top-2" />
     <ShellUISafelistEntry Include="top-4" />
     <ShellUISafelistEntry Include="top-8" />
+    <ShellUISafelistEntry Include="top-[15vh]" />
     <ShellUISafelistEntry Include="top-full" />
     <ShellUISafelistEntry Include="tracking-tight" />
     <ShellUISafelistEntry Include="transition-[grid-template-rows]" />
@@ -351,11 +392,13 @@
     <ShellUISafelistEntry Include="underline-offset-4" />
     <ShellUISafelistEntry Include="var(--border" />
     <ShellUISafelistEntry Include="var(--muted" />
+    <ShellUISafelistEntry Include="w-1.5" />
     <ShellUISafelistEntry Include="w-1/2" />
     <ShellUISafelistEntry Include="w-10" />
     <ShellUISafelistEntry Include="w-12" />
     <ShellUISafelistEntry Include="w-16" />
     <ShellUISafelistEntry Include="w-2.5" />
+    <ShellUISafelistEntry Include="w-2/5" />
     <ShellUISafelistEntry Include="w-3" />
     <ShellUISafelistEntry Include="w-3.5" />
     <ShellUISafelistEntry Include="w-3/4" />
@@ -365,12 +408,17 @@
     <ShellUISafelistEntry Include="w-64" />
     <ShellUISafelistEntry Include="w-7" />
     <ShellUISafelistEntry Include="w-8" />
+    <ShellUISafelistEntry Include="w-9" />
     <ShellUISafelistEntry Include="w-[100px]" />
     <ShellUISafelistEntry Include="w-[70px]" />
+    <ShellUISafelistEntry Include="w-[calc(100%-2rem)]" />
     <ShellUISafelistEntry Include="w-fit" />
     <ShellUISafelistEntry Include="w-full" />
     <ShellUISafelistEntry Include="w-max" />
+    <ShellUISafelistEntry Include="w-px" />
     <ShellUISafelistEntry Include="whitespace-nowrap" />
+    <ShellUISafelistEntry Include="whitespace-pre-line" />
+    <ShellUISafelistEntry Include="z-10" />
     <ShellUISafelistEntry Include="z-40" />
     <ShellUISafelistEntry Include="z-50" />
     <ShellUISafelistEntry Include="zoom-in-95" />
diff --git a/src/ShellUI.Components/wwwroot/shellui-classes.txt b/src/ShellUI.Components/wwwroot/shellui-classes.txt
index 71a213c..546de46 100644
--- a/src/ShellUI.Components/wwwroot/shellui-classes.txt
+++ b/src/ShellUI.Components/wwwroot/shellui-classes.txt
@@ -1,6 +1,6 @@
 align-middle
+animate-bounce
 animate-in
-animate-pulse
 animate-spin
 appearance-none
 aspect-square
@@ -10,14 +10,17 @@ bg-accent
 bg-background
 bg-background/80
 bg-background/95
+bg-black/50
 bg-black/80
 bg-blue-500
 bg-border
 bg-card
+bg-current
 bg-destructive
 bg-green-500
 bg-muted
 bg-muted/30
+bg-muted/40
 bg-popover
 bg-primary
 bg-secondary
@@ -26,14 +29,12 @@ bg-sidebar-primary
 bg-transparent
 bg-yellow-500
 border-0
-border-2
 border-b
 border-border
 border-border/40
 border-destructive
 border-input
 border-l
-border-primary/20
 border-r
 border-t
 border-transparent
@@ -57,10 +58,12 @@ data-[state=open]:text-muted-foreground
 disabled:cursor-not-allowed
 disabled:opacity-50
 disabled:pointer-events-none
+duration-150
 duration-200
 duration-300
 ease-[cubic-bezier(0.4,0,0.2,1)]
 ease-in-out
+ease-out
 fa-bell
 fa-chevron-right
 fa-circle-check
@@ -79,6 +82,7 @@ file:border-0
 file:font-medium
 file:text-sm
 fill-primary-foreground
+first:pt-1.5
 flex-1
 flex-col
 flex-col-reverse
@@ -116,7 +120,10 @@ gap-1.5
 gap-2
 gap-3
 gap-4
+gap-x-2
 grid-cols-2
+grid-cols-3
+grid-cols-5
 grid-cols-7
 grid-rows-[0fr]
 group-data-[collapsible=icon]:!flex
@@ -130,6 +137,11 @@ group-data-[variant=floating]:border
 group-data-[variant=floating]:border-sidebar-border
 group-data-[variant=floating]:rounded-lg
 group-data-[variant=floating]:shadow
+group-first:top-3.5
+group-last:bottom-auto
+group-last:h-3.5
+group-only:hidden
+h-1.5
 h-1/2
 h-10
 h-11
@@ -172,8 +184,8 @@ inline-flex
 inset-0
 inset-x-0
 inset-y-0
+items-baseline
 items-center
-items-end
 items-start
 justify-between
 justify-center
@@ -183,26 +195,35 @@ leading-tight
 left-0
 left-1/2
 left-2
+left-3.5
 lg:space-x-8
 list-none
 material-symbols-outlined
+max-h-48
 max-h-60
-max-h-[300px]
+max-h-[90vh]
+max-h-[min(360px,55vh)]
+max-w-[90vw]
 max-w-sm
+max-w-xl
 mb-1
 mb-2
 mb-4
 mb-6
 md:block
 min-h-0
+min-h-10
+min-h-7
 min-h-8
 min-h-[80px]
 min-w-0
 min-w-24
+min-w-5
 min-w-8
 min-w-[640px]
 min-w-[8rem]
-ml-3
+ml-1
+ml-4
 ml-auto
 motion-reduce:animate-none
 motion-reduce:transition-none
@@ -217,6 +238,7 @@ mt-8
 mt-auto
 mx-auto
 my-1
+object-contain
 object-cover
 opacity-25
 opacity-50
@@ -229,18 +251,23 @@ overflow-auto
 overflow-hidden
 overflow-x-auto
 overflow-y-auto
+overscroll-contain
 p-0.5
 p-1
+p-1.5
 p-2
 p-3
 p-4
 p-6
 p-[3px]
+pb-0.5
+pb-1
 pb-4
 peer-disabled:cursor-not-allowed
 peer-disabled:opacity-70
 peer/menu-button
 pl-2
+pl-3
 pl-4
 placeholder:text-muted-foreground
 pointer-events-auto
@@ -250,6 +277,7 @@ pr-3
 pr-6
 pr-8
 pt-0
+pt-3
 px-1
 px-1.5
 px-2
@@ -261,23 +289,29 @@ px-8
 py-0.5
 py-1
 py-1.5
+py-10
 py-2
+py-3
 py-4
 py-6
+resize-none
 right-0
 right-1
 right-2
 right-4
 ring-offset-background
 ring-sidebar-ring
+rounded-[2px]
 rounded-full
 rounded-lg
 rounded-md
 rounded-sm
+rounded-xl
 scrollbar-thin
 scrollbar-thumb-border
 scrollbar-track-transparent
 select-none
+shadow-2xl
 shadow-lg
 shadow-md
 shadow-sm
@@ -299,6 +333,7 @@ slide-in-from-right
 slide-in-from-top
 slide-in-from-top-2
 sm:flex-row
+sm:inline-flex
 sm:items-center
 sm:justify-between
 sm:max-w-sm
@@ -306,9 +341,14 @@ sm:space-x-6
 sm:text-left
 space-x-1
 space-x-2
+space-y-0.5
 space-y-2
 space-y-4
 sr-only
+starting:opacity-0
+starting:scale-95
+tabular-nums
+text-2xl
 text-5xl
 text-[10px]
 text-[8px]
@@ -337,6 +377,7 @@ top-0
 top-2
 top-4
 top-8
+top-[15vh]
 top-full
 tracking-tight
 transition-[grid-template-rows]
@@ -348,11 +389,13 @@ transition-transform
 underline-offset-4
 var(--border
 var(--muted
+w-1.5
 w-1/2
 w-10
 w-12
 w-16
 w-2.5
+w-2/5
 w-3
 w-3.5
 w-3/4
@@ -362,12 +405,17 @@ w-56
 w-64
 w-7
 w-8
+w-9
 w-[100px]
 w-[70px]
+w-[calc(100%-2rem)]
 w-fit
 w-full
 w-max
+w-px
 whitespace-nowrap
+whitespace-pre-line
+z-10
 z-40
 z-50
 zoom-in-95
diff --git a/src/ShellUI.Components/wwwroot/shellui.js b/src/ShellUI.Components/wwwroot/shellui.js
index 80a690c..024bf98 100644
--- a/src/ShellUI.Components/wwwroot/shellui.js
+++ b/src/ShellUI.Components/wwwroot/shellui.js
@@ -15,9 +15,8 @@ Object.assign(window.ShellUI, {
     registerShortcut: function (handle, key, ctrl, meta, shift, alt, dotNetRef) {
         const listener = (e) => {
             if (e.key.toLowerCase() !== key.toLowerCase()) return;
-            if (ctrl && !e.ctrlKey) return;
-            if (meta && !e.metaKey) return;
-            if (!ctrl && !meta && (e.ctrlKey || e.metaKey)) return;
+            const hasModifier = (ctrl && e.ctrlKey) || (meta && e.metaKey);
+            if ((ctrl || meta) ? !hasModifier : (e.ctrlKey || e.metaKey)) return;
             if (shift !== e.shiftKey) return;
             if (alt !== e.altKey) return;
             e.preventDefault();

From 561fdffea9c4b1a15dce1e1c25dbc78e5c61a4c5 Mon Sep 17 00:00:00 2001
From: Shewatipa Tseisi <shewatipa@chips.co.zw>
Date: Sun, 27 Sep 2026 14:30:35 +0200
Subject: [PATCH 2/7] chore: update component registry counts and documentation

Updated the component registry to reflect the current totals: 194 entries, including 90 direct install targets and 104 hidden dependency entries. Adjusted various documentation files to ensure consistency with the new counts, including README, architecture, CLI syntax, and contributing guidelines. This change enhances clarity for users regarding available components and their classifications.
---
 README.md                       |   2 +-
 docs/ARCHITECTURE.md            |  10 +--
 docs/CLI_SYNTAX.md              |   4 +-
 docs/COMPARISON.md              |   6 +-
 docs/COMPONENT_DEPENDENCIES.md  |  15 ++--
 docs/COMPONENT_ROADMAP.md       | 125 ++++++++++++++++++--------------
 docs/CONTRIBUTING.md            |   2 +-
 docs/FAQ.md                     |   6 +-
 docs/PROJECT_STATUS.md          |   6 +-
 docs/QUICKSTART.md              |   4 +-
 src/ShellUI.CLI/README.md       |   6 +-
 src/ShellUI.Templates/README.md |   6 +-
 12 files changed, 108 insertions(+), 84 deletions(-)

diff --git a/README.md b/README.md
index 240a708..91716b1 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ ShellUI is prerelease software. Validate it in your target Blazor and hosting en
 ## Capabilities
 
 - The CLI commands are `init`, `add`, `list`, `remove`, and `update`, plus `theme init`, `theme apply`, and `theme update`.
-- The component registry has **176 entries**: **76 direct install targets** and **100 hidden dependency entries**. `list` shows direct targets; `add` resolves hidden dependencies.
+- The component registry has **194 entries**: **90 direct install targets** and **104 hidden dependency entries**. `list` shows direct targets; `add` resolves hidden dependencies.
 - `0.3.0-rc.2` adds `typed-select`, `command-palette`, `data-picker`, `multi-select`, `tag-input`, `donut-chart`, `radar-chart`, and `radial-chart`.
 - `ShellUI.Components` supports a release-generated precompiled CSS bundle and a generated safelist for existing Tailwind builds.
 - The CLI can install source with Tailwind's standalone executable or an npm-based build. The current Tailwind baseline is `4.3.2`.
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 6784220..30cf6b5 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -11,7 +11,7 @@ This document describes the ShellUI source tree.
 | Tailwind CSS | `4.3.2` |
 | Solution | `ShellUI.slnx` |
 | Solution projects | 6 |
-| Registry | 176 entries: 76 direct targets and 100 hidden dependency entries |
+| Registry | 194 entries: 90 direct targets and 104 hidden dependency entries |
 
 ShellUI is a CLI-first Blazor component library. The CLI copies source into a consumer project, while `ShellUI.Components` is an independent Razor class library (RCL) for consumers who prefer NuGet.
 
@@ -89,13 +89,13 @@ The implemented command tree is:
 
 ## Registry Model and Counts
 
-`ComponentRegistry` contains 176 metadata entries:
+`ComponentRegistry` contains 194 metadata entries:
 
 | Registry classification | Count | Meaning |
 |---|---:|---|
-| Direct targets | 76 | Entries with `IsAvailable = true`; these are the normal targets shown by `shellui list`. |
-| Hidden entries | 100 | Entries with `IsAvailable = false`; these are generally installed through a parent target. |
-| **Total** | **176** | All registered templates, sub-components, variants, models, services, and assets. |
+| Direct targets | 90 | Entries with `IsAvailable = true`; these are the normal targets shown by `shellui list`. |
+| Hidden entries | 104 | Entries with `IsAvailable = false`; these are generally installed through a parent target. |
+| **Total** | **194** | All registered templates, sub-components, variants, models, services, and assets. |
 
 A dependency entry is still real source and is written to the consumer project when the dependency walk reaches it. The two counts describe registry visibility, not two different component libraries.
 
diff --git a/docs/CLI_SYNTAX.md b/docs/CLI_SYNTAX.md
index 75ac3ed..f9138c3 100644
--- a/docs/CLI_SYNTAX.md
+++ b/docs/CLI_SYNTAX.md
@@ -1,6 +1,6 @@
 # ShellUI CLI Syntax
 
-This reference covers CLI `0.3.0-rc.2`: `net10.0`, Tailwind CSS `4.3.2`, and 76 direct component targets. Older versions, including the stable `0.2.1`, lack some of these commands.
+This reference covers CLI `0.3.0-rc.2`: `net10.0`, Tailwind CSS `4.3.2`, and 90 direct component targets. Older versions, including the stable `0.2.1`, lack some of these commands.
 
 ## Command prefix
 
@@ -86,7 +86,7 @@ shellui list --installed
 shellui list --available
 ```
 
-There are 76 direct targets. Registry entries used only as dependencies are not counted as direct targets. Choose either `--installed` or `--available` to filter the output.
+There are 90 direct targets. Registry entries used only as dependencies are not counted as direct targets. Choose either `--installed` or `--available` to filter the output.
 
 ## `remove`
 
diff --git a/docs/COMPARISON.md b/docs/COMPARISON.md
index 6d42c2b..dfb6890 100644
--- a/docs/COMPARISON.md
+++ b/docs/COMPARISON.md
@@ -6,7 +6,7 @@ This is a qualitative comparison, not a benchmark report. Library features, pack
 
 - **Target framework:** .NET 10
 - **Tailwind CSS:** `4.3.2`
-- **CLI inventory:** 76 direct targets, 176 registry entries, and 100 hidden entries
+- **CLI inventory:** 90 direct targets, 194 registry entries, and 104 hidden entries
 - **Distribution:** the CLI copies source into an application; the repository also contains the packable `ShellUI.Components` package
 - **Packaging boundary:** only `ShellUI.CLI` and `ShellUI.Components` are packable. `ShellUI.Core` and `ShellUI.Templates` are internal/non-packable projects.
 
@@ -18,7 +18,7 @@ The direct-target count is the number users invoke with `shellui add`. It is not
 |---|---|---|---|---|---|---|
 | Distribution | CLI source-copy workflow; `ShellUI.Components` is packable | NuGet package | NuGet package | NuGet package | NuGet package | NuGet package |
 | CSS model | Tailwind CSS `4.3.2` | Material-oriented component styling | Project-specific component styling | Provider-based CSS options | Ant Design styling | Project-specific styling |
-| Direct component count | 76 CLI targets; 176 registry entries; 100 hidden | Not audited here | Not audited here | Not audited here | Not audited here | Not audited here |
+| Direct component count | 90 CLI targets; 194 registry entries; 104 hidden | Not audited here | Not audited here | Not audited here | Not audited here | Not audited here |
 | Source customization | Copied component source can be edited | Package/API customization | Package/API customization | Package/API customization | Package/API customization | Package/API customization |
 | CLI workflow | Yes | No CLI in this comparison | No CLI in this comparison | No CLI in this comparison | No CLI in this comparison | No CLI in this comparison |
 | Accessibility status | Semantic markup is used; no current WCAG conformance claim | Not audited here | Not audited here | Not audited here | Not audited here | Not audited here |
@@ -39,7 +39,7 @@ ShellUI templates use Tailwind utility classes and CSS variables. ShellUI pins T
 
 ### Registry-driven dependencies
 
-`ComponentRegistry` is authoritative for the 76 direct targets, 100 hidden support entries, source dependencies, and NuGet dependencies. A component's visible sub-components or support files do not imply that it is a standalone package.
+`ComponentRegistry` is authoritative for the 90 direct targets, 104 hidden support entries, source dependencies, and NuGet dependencies. A component's visible sub-components or support files do not imply that it is a standalone package.
 
 ### Compositional APIs
 
diff --git a/docs/COMPONENT_DEPENDENCIES.md b/docs/COMPONENT_DEPENDENCIES.md
index 183f2d6..d1a9ee7 100644
--- a/docs/COMPONENT_DEPENDENCIES.md
+++ b/docs/COMPONENT_DEPENDENCIES.md
@@ -4,10 +4,10 @@
 
 ## Registry snapshot
 
-- **176** total registry entries
-- **76** direct CLI targets (`IsAvailable = true`)
-- **100** hidden entries (`IsAvailable = false`)
-- `shellui list` displays the 76 direct targets; hidden sub-components, variants, models, services, and support assets are omitted from the public list.
+- **194** total registry entries
+- **90** direct CLI targets (`IsAvailable = true`)
+- **104** hidden entries (`IsAvailable = false`)
+- `shellui list` displays the 90 direct targets; hidden sub-components, variants, models, services, and support assets are omitted from the public list.
 
 `Dependencies` contains registry-declared source/template dependencies. `NuGetDependencies` is separate and is used by the installer to add package references. A relationship visible in rendered markup is not automatically a registry dependency, so do not infer a dependency graph from component names or visual composition.
 
@@ -30,8 +30,9 @@ The following table summarizes the non-empty `Dependencies` declared by the curr
 | `card` | `card-header`, `card-title`, `card-description`, `card-content`, `card-footer` | — |
 | `carousel` | `carousel-item`, `carousel-content`, `carousel-previous`, `carousel-next`, `carousel-dots` | — |
 | `chart` | `chart-variants`, `chart-styles` | `Blazor-ApexCharts` `6.0.2` |
+| `chat` | `chat-message`, `chat-input` | — |
 | `collapsible` | `collapsible-trigger`, `collapsible-content` | — |
-| `command` | `dialog` | — |
+| `command` | `command-models` | — |
 | `command-palette` | `command`, `shellui-js` | — |
 | `context-menu` | `context-menu-models` | — |
 | `copy-button` | `shellui-js` | — |
@@ -50,6 +51,7 @@ The following table summarizes the non-empty `Dependencies` declared by the curr
 | `multi-series-chart` | `chart`, `chart-series` | — |
 | `navigation-menu` | `navigation-menu-item` | — |
 | `pie-chart` | `chart` | — |
+| `qr-code` | — | `QRCoder` `1.8.0` |
 | `radar-chart` | `chart` | — |
 | `radial-chart` | `chart` | — |
 | `radio-group` | `radio-group-item` | — |
@@ -60,7 +62,10 @@ The following table summarizes the non-empty `Dependencies` declared by the curr
 | `table` | `table-header`, `table-body`, `table-row`, `table-cell`, `table-head` | — |
 | `tabs` | `tabs-list`, `tabs-trigger`, `tabs-content` | — |
 | `theme-toggle` | `shellui-js` | — |
+| `timeline` | `timeline-item` | — |
 | `toggle` | `toggle-variants` | — |
+| `toggle-group` | `toggle-group-item` | — |
+| `tree-view` | `tree-view-item` | — |
 
 The table is intentionally limited to the current direct targets. It does not replace the registry, and it should be regenerated when metadata changes. NuGet dependencies are shown where metadata declares them; chart-family targets inherit `chart`'s `Blazor-ApexCharts` dependency through recursive resolution.
 
diff --git a/docs/COMPONENT_ROADMAP.md b/docs/COMPONENT_ROADMAP.md
index d0096e2..b9b3c9b 100644
--- a/docs/COMPONENT_ROADMAP.md
+++ b/docs/COMPONENT_ROADMAP.md
@@ -1,44 +1,63 @@
 # ShellUI Component Roadmap
 
-**Goal:** Build the components and tooling needed for a Tailwind-first Blazor design system, including the foundations for ShellDocs.
+**Goal:** Build the components and tooling needed for a Tailwind-first Blazor design system.
 
 .NET 10 · Tailwind CSS `4.3.2`
 
 ## Current inventory
 
-`ComponentRegistry` is the source of truth for component availability, names, and dependencies. The current registry contains **176 entries**:
+`ComponentRegistry` is the source of truth for component availability, names, and dependencies. The current registry contains **194 entries**:
 
-- **76 direct CLI targets** shown by `shellui list`
-- **100 hidden entries** for sub-components, variants, models, services, and support assets
+- **90 direct CLI targets** shown by `shellui list`
+- **104 hidden entries** for sub-components, variants, models, services, and support assets
 - **Packable projects:** `ShellUI.CLI` and `ShellUI.Components`
 
 Hidden entries are not counted as direct targets. They can still be installed recursively when a parent target declares them.
 
-### Implemented direct targets (76)
+### Implemented direct targets (90)
 
 The following categories describe the direct targets in the current registry, not a promise about future scope.
 
-- [x] **Form (21):** Button, Checkbox, Combobox, DataPicker, DatePicker, DateRangePicker, FileUpload, Form, Input, InputOTP, Label, MultiSelect, RadioGroup, Select, Slider, Switch, TagInput, Textarea, TimePicker, Toggle, TypedSelect
-- [x] **Layout (12):** Accordion, Breadcrumb, Card, Collapsible, DashboardLayout01, DashboardLayout02, LinkCard, Navbar, Resizable, ScrollArea, Separator, Sidebar
+- [x] **Form (26):** Button, ButtonGroup, ChatInput, Checkbox, Combobox, DataPicker, DatePicker, DateRangePicker, FileUpload, Form, Input, InputGroup, InputOTP, Label, MultiSelect, NumberInput, RadioGroup, Select, Slider, Switch, TagInput, Textarea, TimePicker, Toggle, ToggleGroup, TypedSelect
+- [x] **Layout (13):** Accordion, AspectRatio, Breadcrumb, Card, Collapsible, DashboardLayout01, DashboardLayout02, LinkCard, Navbar, Resizable, ScrollArea, Separator, Sidebar
 - [x] **Feedback (9):** Alert, Callout, EmptyState, Loading, Progress, Skeleton, Sonner, Toast, Tooltip
 - [x] **Overlay (9):** AlertDialog, Command, CommandPalette, Dialog, Drawer, Dropdown, HoverCard, Popover, Sheet
-- [x] **Navigation (7):** ContextMenu, Menubar, NavigationMenu, Pagination, PrevNextNav, Stepper, Tabs
-- [x] **Data Display (16):** AreaChart, Avatar, Badge, BarChart, Calendar, Carousel, Chart, ChartSeries, DataTable, DonutChart, LineChart, MultiSeriesChart, PieChart, RadarChart, RadialChart, Table
+- [x] **Navigation (8):** ContextMenu, Menubar, NavigationMenu, Pagination, PrevNextNav, Stepper, Tabs, TreeView
+- [x] **Data Display (21):** AreaChart, Avatar, Badge, BarChart, Calendar, Carousel, Chart, ChartSeries, Chat, ChatMessage, DataTable, DonutChart, LineChart, MultiSeriesChart, PieChart, QrCode, RadarChart, RadialChart, StatCard, Table, Timeline
+- [x] **Typography (1):** Kbd
+- [x] **Media (1):** ImageViewer
 - [x] **Utility (2):** CopyButton, ThemeToggle
 
-### Implemented ShellDocs building blocks
-
-- [x] **Callout** — information, warning, danger, and tip callouts
-- [x] **CopyButton** — clipboard copy interaction
-- [x] **LinkCard** — card-style related links
-- [x] **PrevNextNav** — previous/next page navigation
-- [x] **Breadcrumb** — route and section breadcrumbs
-- [x] **Tabs** — value-based tab navigation
-- [x] **Steps / Stepper** — step-by-step UI is available as `stepper`; there is no separate `steps` registry target
-- [x] **Command and CommandPalette** — command overlay and global hotkey wrapper
-- [x] **Sidebar, Navbar, ThemeToggle, and Table** — building blocks for a documentation shell and API reference
-
-The components above are implemented foundations. Dedicated documentation-site wrappers, content rendering, and search infrastructure are tracked separately below.
+### Added in 0.4
+
+- [x] **Kbd** — keyboard key hint
+- [x] **AspectRatio** — fixed-ratio container
+- [x] **ButtonGroup** — joined buttons, horizontal or vertical
+- [x] **ToggleGroup** — single or multiple selection (`ToggleGroupItem`)
+- [x] **InputGroup** — input with prefix and suffix slots
+- [x] **NumberInput** — increment/decrement input with min, max and step
+- [x] **StatCard** — KPI tile with value, change and trend
+- [x] **Timeline** — vertical event timeline (`TimelineItem`)
+- [x] **TreeView** — expandable, selectable tree (`TreeViewItem`)
+- [x] **QrCode** — QR code rendered as SVG (QRCoder)
+- [x] **ImageViewer** — thumbnail with zoomable lightbox
+- [x] **Chat, ChatMessage, ChatInput** — AI chat panel, message bubbles with streaming indicator, and a prompt input (Enter sends, Shift+Enter adds a newline)
+
+## ShellDocs (done)
+
+Documentation-site components are implemented in [ShellDocs](https://github.com/shellui-dev/shelldocs), which builds on ShellUI. They are not ShellUI CLI targets.
+
+- [x] **CodeBlock** — `CodeGroup`, `CodeTab`, and syntax highlighting via `CodeBlockEnhancer`
+- [x] **MarkdownRenderer** — `MarkdownContent`
+- [x] **FileTree** — `FileTree`, `FileTreeItem`
+- [x] **Full-text SearchDialog** — `SearchDialog` backed by `SearchIndex`
+- [x] **TableOfContents**
+- [x] **DocsSidebar, DocsHeader, DocsBreadcrumb** wrappers
+- [x] **TypeTable** — `TypeTable` and `AutoTypeTable`
+- [x] **Tabs (Docs variant)** — `CodeGroup` / `CodeTab`
+- [x] **ShellDocs pipeline** — frontmatter parsing, routing, search index, and live previews (`ComponentPreview`, `PreviewFrame`)
+
+ShellUI building blocks used by ShellDocs: Callout, CopyButton, LinkCard, PrevNextNav, Breadcrumb, Tabs, Stepper, Command/CommandPalette, Sidebar, Navbar, ThemeToggle and Table.
 
 ## Compositional upgrades (done)
 
@@ -53,55 +72,55 @@ The current registry provides explicit sub-components for these parent component
 - [x] **Dropdown** — `DropdownTrigger`, `DropdownContent`, `DropdownItem`
 - [x] **Popover** — `PopoverTrigger`, `PopoverContent`
 - [x] **HoverCard** — `HoverCardTrigger`, `HoverCardContent`
-- [x] **Carousel** — `CarouselList`, `CarouselSlide`, and navigation parts
-- [x] **ContextMenu** — `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuOption`
-- [x] **NavigationMenu** — `NavList`, `NavItem`, `NavTrigger`, `NavContent`
-- [x] **Select** — `SelectTrigger`, `SelectContent`, `SelectItem`; the native select remains the default path
 - [x] **Drawer and Sheet** — explicit trigger/content and variant support
 
+### Package only (CLI templates pending)
+
+These parts exist in the `ShellUI.Components` NuGet package, but their CLI templates are empty placeholders, so CLI installs only get the parent component.
+
+- [ ] **Select** — `SelectTrigger`, `SelectContent`, `SelectItem` (the native select works in both)
+- [ ] **ContextMenu** — `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuOption`
+- [ ] **NavigationMenu** — `NavList`, `NavItem`, `NavTrigger`, `NavContent`
+- [ ] **Carousel** — `CarouselList`, `CarouselSlide`
+
 The intended pattern is explicit child components, cascaded state and callbacks, value/label parameters, and Tailwind utility classes matching the shadcn-style API.
 
 ## Unscheduled ideas
 
-These are genuinely unscheduled ideas. They are not current registry targets, and no date or release commitment is implied.
+These are unscheduled ideas. They are not current registry targets, and no date or release commitment is implied.
 
-### ShellDocs-specific components and infrastructure
+### AI
 
-- [ ] **CodeBlock** — syntax highlighting, copy action, line numbers, highlighting, and filename tabs
-- [ ] **MDX / MarkdownRenderer** — Markdown or MDX parsing and component embedding
-- [ ] **FileTree** — file and folder navigation with icons
-- [ ] **Full-text SearchDialog** — a searchable documentation index; `CommandPalette` currently provides the command overlay, not a full-text index
-- [ ] **TableOfContents** — heading extraction and scroll-spy state
-- [ ] **DocsSidebar wrapper** — documentation-specific navigation assembled from the existing `Sidebar`
-- [ ] **DocsHeader wrapper** — documentation header composed from existing navigation, search, and theme pieces
-- [ ] **DocsBreadcrumb wrapper** — route-aware breadcrumb generation using the existing `Breadcrumb`
-- [ ] **TypeTable** — generated API and props reference table
-- [ ] **Tabs (Docs variant)** — a documentation-specific code-tab presentation built on the existing `Tabs`
-- [ ] **ShellDocs pipeline** — frontmatter parsing, file-based routing, search-index generation, syntax highlighting, and live component previews
+- [ ] **PromptSuggestions** — clickable suggestion chips for empty chats
+- [ ] **Reasoning / ToolCall** — collapsible blocks for model reasoning and tool results
+- [ ] **CodeBlock (ShellUI)** — copyable code block for chat responses
 
-### UI enhancements
+### Forms and input
 
-- [ ] **TreeView** — hierarchical tree with expansion, selection, and drag-and-drop
-- [ ] **Timeline** — vertical event timeline with icons and content
-- [ ] **AspectRatio** — constrained aspect-ratio container
+- [ ] **Field** — label, description and validation message wrapper
 - [ ] **ColorPicker** — swatches and HEX/RGB input
-- [ ] **Toggle Group** — single- or multi-select toggle groups
-- [ ] **Number Input** — increment and decrement number input
+- [ ] **Rating** — star rating input
+- [ ] **SignaturePad** — draw-to-sign canvas
 
-### Rich content
+### Data and layout
 
-- [ ] **RichTextEditor** — WYSIWYG editor
-- [ ] **KanbanBoard** — drag-and-drop columns and cards
-- [ ] **VirtualScroll** — virtualized list for large datasets
+- [ ] **VirtualList** — wrapper over Blazor `Virtualize` with ShellUI styling
 - [ ] **InfiniteScroll** — load more on scroll
+- [ ] **KanbanBoard** — drag-and-drop columns and cards
+- [ ] **SortableList** — drag-and-drop reordering
+- [ ] **JsonViewer** — collapsible JSON tree with copy
 
-### Media and utilities
+### Media
 
-- [ ] **ImageViewer** — lightbox with zoom and pan
-- [ ] **VideoPlayer** — video playback controls
-- [ ] **QRCode** — QR code generation
+- [ ] **VideoPlayer** — video playback with ShellUI controls
+- [ ] **AudioPlayer** — audio playback with waveform-style progress
+- [ ] **ImageGallery** — grid of images sharing one lightbox with next/previous
 - [ ] **Barcode** — barcode display
 
+### Rich content
+
+- [ ] **RichTextEditor** — WYSIWYG editor
+
 ## Roadmap maintenance
 
 - Derive direct counts, names, categories, availability, and dependencies from `ComponentRegistry`.
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index 7b7d7cb..4d09084 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -93,7 +93,7 @@ For a component change:
 
 1. Update the live component and its generated template together.
 2. Update registry metadata, dependencies, `FilePath`, variants, and NuGet dependencies when the public contract changes.
-3. Preserve the distinction between direct targets and hidden dependency entries. The current registry has 176 entries, including 76 direct targets and 100 hidden entries.
+3. Preserve the distinction between direct targets and hidden dependency entries. The current registry has 194 entries, including 90 direct targets and 104 hidden entries.
 4. Use the Tailwind `4.3.2` variable and utility conventions already used by the project.
 5. Add or update tests that exercise the changed registry, template, or CLI behavior.
 6. Review keyboard and assistive-technology behavior without claiming a blanket accessibility conformance level that the repository does not test.
diff --git a/docs/FAQ.md b/docs/FAQ.md
index 622f7d1..6f8f531 100644
--- a/docs/FAQ.md
+++ b/docs/FAQ.md
@@ -6,7 +6,7 @@ Answers for the current ShellUI source and the currently published packages.
 
 ### Which version should I use?
 
-Use `0.3.0-rc.2`. It targets `net10.0`, uses Tailwind CSS `4.3.2`, and exposes 76 direct component targets. A plain install selects the older stable `0.2.1`, so select the prerelease explicitly:
+Use `0.3.0-rc.2`. It targets `net10.0`, uses Tailwind CSS `4.3.2`, and exposes 90 direct component targets. A plain install selects the older stable `0.2.1`, so select the prerelease explicitly:
 
 ```bash
 dotnet tool install -g ShellUI.CLI --version 0.3.0-rc.2
@@ -49,7 +49,7 @@ shellui add button,input,card
 shellui add button,card dialog
 ```
 
-Use the exact names printed by `shellui list`. Dependency-only entries are installed automatically and are not counted among the 76 direct targets.
+Use the exact names printed by `shellui list`. Dependency-only entries are installed automatically and are not counted among the 90 direct targets.
 
 ### Which names should I use?
 
@@ -87,7 +87,7 @@ shellui list --installed
 shellui list --available
 ```
 
-There are 76 direct targets. Use the command output as the authoritative name list.
+There are 90 direct targets. Use the command output as the authoritative name list.
 
 ### What happens when I update a component?
 
diff --git a/docs/PROJECT_STATUS.md b/docs/PROJECT_STATUS.md
index d99e34d..406311e 100644
--- a/docs/PROJECT_STATUS.md
+++ b/docs/PROJECT_STATUS.md
@@ -42,10 +42,10 @@ theme update
 
 ### Registry and components
 
-`ComponentRegistry` has 176 entries:
+`ComponentRegistry` has 194 entries:
 
-- 76 direct targets with `IsAvailable = true`.
-- 100 hidden entries with `IsAvailable = false`, generally installed as dependencies or assets.
+- 90 direct targets with `IsAvailable = true`.
+- 104 hidden entries with `IsAvailable = false`, generally installed as dependencies or assets.
 
 The direct-target count is the number shown by the normal public list. The hidden count is not a second public library; it represents the sub-components, variants, models, services, and assets needed to make the direct targets work.
 
diff --git a/docs/QUICKSTART.md b/docs/QUICKSTART.md
index ad6d1f1..8af7ab5 100644
--- a/docs/QUICKSTART.md
+++ b/docs/QUICKSTART.md
@@ -1,6 +1,6 @@
 # ShellUI Quick Start
 
-This quick start uses ShellUI `0.3.0-rc.2`: .NET 10, Tailwind CSS `4.3.2`, and 76 direct component targets.
+This quick start uses ShellUI `0.3.0-rc.2`: .NET 10, Tailwind CSS `4.3.2`, and 90 direct component targets.
 
 ## Prerequisites
 
@@ -70,7 +70,7 @@ Dependencies are copied automatically. Use `--force` to overwrite an existing co
 shellui add button --force
 ```
 
-Use the exact names shown by `shellui list`. There are 76 direct targets; dependency-only registry entries are not direct targets.
+Use the exact names shown by `shellui list`. There are 90 direct targets; dependency-only registry entries are not direct targets.
 
 ## Use a component
 
diff --git a/src/ShellUI.CLI/README.md b/src/ShellUI.CLI/README.md
index ab22514..cf30d11 100644
--- a/src/ShellUI.CLI/README.md
+++ b/src/ShellUI.CLI/README.md
@@ -138,10 +138,10 @@ The lock file stores the original source URL, theme name, timestamp, and SHA-256
 
 ## Component inventory
 
-The registry contains **176 entries**:
+The registry contains **194 entries**:
 
-- **76 direct install targets**, shown by `list`
-- **100 hidden dependency entries**, resolved by `add` but omitted from the direct list
+- **90 direct install targets**, shown by `list`
+- **104 hidden dependency entries**, resolved by `add` but omitted from the direct list
 
 The targets added in `0.3.0-rc.2` are:
 
diff --git a/src/ShellUI.Templates/README.md b/src/ShellUI.Templates/README.md
index f87c817..d88b33d 100644
--- a/src/ShellUI.Templates/README.md
+++ b/src/ShellUI.Templates/README.md
@@ -32,10 +32,10 @@ The global tool command is `shellui`; a local .NET tool is invoked as `dotnet sh
 
 ## Template inventory
 
-The registry contains **176 entries**:
+The registry contains **194 entries**:
 
-- **76 direct install targets** displayed by `shellui list`
-- **100 hidden dependency entries** installed recursively and omitted from the direct list
+- **90 direct install targets** displayed by `shellui list`
+- **104 hidden dependency entries** installed recursively and omitted from the direct list
 
 Each entry provides content plus metadata used by the CLI, including its display name, category, description, target path, version, dependencies, and optional NuGet dependencies. The catalog also includes hidden subcomponents, variants, models, services, JavaScript, and stylesheet assets required by direct targets.
 

From 403ad3142289a6f8eec9243a63bbf08fda98216f Mon Sep 17 00:00:00 2001
From: Shewatipa Tseisi <shewatipa@chips.co.zw>
Date: Sun, 27 Sep 2026 14:31:22 +0200
Subject: [PATCH 3/7] feat: add QRCoder package and update shellui.json for new
 layout and component versions

- Added QRCoder package reference to the BlazorInteractiveServer project.
- Updated shellui.json to include a new LayoutPath and updated versions for several components to 0.3.0-rc.2.
- Introduced new CSS file for chart styles to enhance visual consistency across chart components.
---
 .../BlazorInteractiveServer.csproj            |   1 +
 NET10/BlazorInteractiveServer/shellui.json    | 161 +++++++++++++++++-
 NET10/BlazorInteractiveServer/wwwroot/app.css |   2 +-
 .../wwwroot/css/charts.css                    | 149 ++++++++++++++++
 .../BlazorInteractiveServer/wwwroot/input.css |   3 +
 .../wwwroot/shellui.js                        | 110 ++++++------
 6 files changed, 370 insertions(+), 56 deletions(-)
 create mode 100644 NET10/BlazorInteractiveServer/wwwroot/css/charts.css

diff --git a/NET10/BlazorInteractiveServer/BlazorInteractiveServer.csproj b/NET10/BlazorInteractiveServer/BlazorInteractiveServer.csproj
index 93737b4..4e61c5e 100644
--- a/NET10/BlazorInteractiveServer/BlazorInteractiveServer.csproj
+++ b/NET10/BlazorInteractiveServer/BlazorInteractiveServer.csproj
@@ -7,6 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="QRCoder" Version="1.8.0" />
     <PackageReference Include="System.Linq.Dynamic.Core" Version="1.6.9" />
     <PackageReference Include="Blazor-ApexCharts" Version="6.0.2" />
   </ItemGroup>
diff --git a/NET10/BlazorInteractiveServer/shellui.json b/NET10/BlazorInteractiveServer/shellui.json
index f8f24b1..50f573f 100644
--- a/NET10/BlazorInteractiveServer/shellui.json
+++ b/NET10/BlazorInteractiveServer/shellui.json
@@ -2,6 +2,7 @@
   "Schema": "https://shellui.dev/schema.json",
   "Style": "default",
   "ComponentsPath": "Components/UI",
+  "LayoutPath": "Components/Layout",
   "Tailwind": {
     "Enabled": true,
     "Version": "4.1.0",
@@ -270,13 +271,13 @@
     },
     {
       "Name": "chart-variants",
-      "Version": "0.1.1",
+      "Version": "0.3.0-rc.2",
       "InstalledAt": "2026-01-17T01:41:18.8862813Z",
       "IsCustomized": false
     },
     {
       "Name": "chart",
-      "Version": "0.1.1",
+      "Version": "0.3.0-rc.2",
       "InstalledAt": "2026-01-17T01:41:18.9171276Z",
       "IsCustomized": false
     },
@@ -315,6 +316,162 @@
       "Version": "0.1.1",
       "InstalledAt": "2026-01-17T01:19:53.3598418Z",
       "IsCustomized": false
+    },
+    {
+      "Name": "kbd",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.0902662Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "aspect-ratio",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.0951949Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "button-group",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.0969264Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "toggle-group-item",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.0986154Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "toggle-group",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1005892Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "input-group",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1022617Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "number-input",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1038171Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "stat-card",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1053252Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "timeline-item",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1076949Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "timeline",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1093788Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "tree-view-item",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1124648Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "tree-view",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1142978Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "qr-code",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1158551Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "image-viewer",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1176989Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "chat-message",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1194393Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "chat-input",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1209127Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "chat",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T16:31:58.1221956Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "command-models",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T17:01:28.0577661Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "command",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T17:01:28.0621235Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "shellui-js",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T17:01:28.0644172Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "command-palette",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T17:01:28.0665166Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "loading",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T17:01:28.0689161Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "sidebar-models",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T17:01:28.0768459Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "sidebar-provider",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T17:01:28.0791313Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "chart-styles",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T18:08:10.2910456Z",
+      "IsCustomized": false
+    },
+    {
+      "Name": "radar-chart",
+      "Version": "0.3.0-rc.2",
+      "InstalledAt": "2026-09-26T18:08:10.295392Z",
+      "IsCustomized": false
     }
   ],
   "ProjectType": 1
diff --git a/NET10/BlazorInteractiveServer/wwwroot/app.css b/NET10/BlazorInteractiveServer/wwwroot/app.css
index aae512d..4d6198f 100644
--- a/NET10/BlazorInteractiveServer/wwwroot/app.css
+++ b/NET10/BlazorInteractiveServer/wwwroot/app.css
@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000;--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-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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;--tw-content:""}}}@layer theme{:root,:host{--font-sans:var(--font-sans);--font-serif:var(--font-serif);--font-mono:var(--font-mono);--color-red-50:oklch(97.1% .013 17.38);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-900:oklch(39.6% .141 25.723);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-900:oklch(42.1% .095 57.708);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-900:oklch(39.3% .095 152.535);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-purple-500:oklch(62.7% .265 303.9);--color-pink-500:oklch(65.6% .241 354.308);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .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:-.025em;--tracking-normal:0em;--leading-tight:1.25;--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-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--blur-sm:8px;--blur-md:12px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--shadow:var(--shadow);--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)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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;-webkit-text-decoration: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{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.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{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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:currentColor}@supports (color:color-mix(in lab, red, red)){::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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.top-0{top:0}.top-1\.5{top:calc(var(--spacing) * 1.5)}.top-1\/2{top:50%}.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:0}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-full{right:100%}.bottom-0{bottom:0}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-4{left:calc(var(--spacing) * 4)}.left-\[50\%\]{left:50%}.left-full{left:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-2{margin-inline:calc(var(--spacing) * -2)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-3\.5{margin-inline:calc(var(--spacing) * 3.5)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.my-1{margin-block:var(--spacing)}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.-mt-20{margin-top:calc(var(--spacing) * -20)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.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-10{margin-top:calc(var(--spacing) * 10)}.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-20{margin-bottom:calc(var(--spacing) * -20)}.mb-1{margin-bottom:var(--spacing)}.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:var(--spacing)}.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}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.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}.aspect-video{aspect-ratio:var(--aspect-video)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-1\/2{height:50%}.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-svh{height:100svh}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-\[90vh\]{max-height:90vh}.max-h-\[300px\]{max-height:300px}.max-h-screen{max-height:100vh}.\!min-h-0{min-height:0!important}.min-h-0{min-height:0}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-\[50vh\]{min-height:50vh}.min-h-\[60px\]{min-height:60px}.min-h-\[80px\]{min-height:80px}.min-h-\[100px\]{min-height:100px}.min-h-\[120px\]{min-height:120px}.min-h-\[160px\]{min-height:160px}.min-h-\[420px\]{min-height:420px}.min-h-screen{min-height:100vh}.min-h-svh{min-height:100svh}.w-1{width:var(--spacing)}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/2{width:50%}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-3\/4{width:75%}.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-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-48{width:calc(var(--spacing) * 48)}.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-\[200px\]{width:200px}.w-\[250px\]{width:250px}.w-\[280px\]{width:280px}.w-\[320px\]{width:320px}.w-\[350px\]{width:350px}.w-\[380px\]{width:380px}.w-\[400px\]{width:400px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[200px\]{max-width:200px}.max-w-\[400px\]{max-width:400px}.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:0}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-\[8rem\]{min-width:8rem}.min-w-\[640px\]{min-width:640px}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}.caption-bottom{caption-side:bottom}.origin-top-right{transform-origin:100% 0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0{--tw-translate-x: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-x-px{--tw-translate-x:1px;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-90{rotate:90deg}.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}.resize{resize:both}.scrollbar-thin{scrollbar-width:thin}.scrollbar-thumb-border{--tw-scrollbar-thumb:var(--border);scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.scrollbar-track-transparent{--tw-scrollbar-track:transparent;scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{appearance:none}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.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))}.grid-rows-\[0fr\]{grid-template-rows:0fr}.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{gap:0}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.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)}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block:0}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>: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)))}:where(.space-y-2>: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)))}:where(.space-y-3>: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)))}:where(.space-y-4>: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)))}:where(.space-y-6>: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)))}:where(.space-y-8>: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)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(var(--spacing) * var(--tw-space-x-reverse));margin-inline-end:calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>: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)))}:where(.space-x-4>: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)))}:where(.space-x-6>: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{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.\[border-radius\:var\(--radius\)\]{border-radius:var(--radius)}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{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}.rounded-b-xl{border-bottom-right-radius:calc(var(--radius) + 4px);border-bottom-left-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.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-border,.border-border\/40{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/40{border-color:color-mix(in oklab, var(--border) 40%, transparent)}}.border-destructive{border-color:var(--destructive)}.border-green-500{border-color:var(--color-green-500)}.border-input{border-color:var(--input)}.border-muted{border-color:var(--muted)}.border-primary,.border-primary\/20{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/20{border-color:color-mix(in oklab, var(--primary) 20%, transparent)}}.border-red-500{border-color:var(--color-red-500)}.border-ring{border-color:var(--ring)}.border-sidebar-border{border-color:var(--sidebar-border)}.border-transparent{border-color:#0000}.border-yellow-500{border-color:var(--color-yellow-500)}.border-t-primary{border-top-color:var(--primary)}.border-r-primary\/50{border-right-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-r-primary\/50{border-right-color:color-mix(in oklab, var(--primary) 50%, transparent)}}.bg-accent,.bg-accent\/30{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/30{background-color:color-mix(in oklab, var(--accent) 30%, transparent)}}.bg-accent\/50{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/50{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.bg-amber-500\/5{background-color:#f99c000d}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/5{background-color:color-mix(in oklab, var(--color-amber-500) 5%, transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/95{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/95{background-color:color-mix(in oklab, var(--background) 95%, transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.bg-black\/80{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-500\/5{background-color:#3080ff0d}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/5{background-color:color-mix(in oklab, var(--color-blue-500) 5%, transparent)}}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/50{background-color:var(--card)}@supports (color:color-mix(in lab, red, red)){.bg-card\/50{background-color:color-mix(in oklab, var(--card) 50%, transparent)}}.bg-destructive{background-color:var(--destructive)}.bg-emerald-500\/5{background-color:#00bb7f0d}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/5{background-color:color-mix(in oklab, var(--color-emerald-500) 5%, transparent)}}.bg-green-50{background-color:var(--color-green-50)}.bg-green-500{background-color:var(--color-green-500)}.bg-green-500\/20{background-color:#00c75833}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/20{background-color:color-mix(in oklab, var(--color-green-500) 20%, transparent)}}.bg-input{background-color:var(--input)}.bg-muted,.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.bg-muted\/60{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/60{background-color:color-mix(in oklab, var(--muted) 60%, transparent)}}.bg-popover{background-color:var(--popover)}.bg-primary,.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--primary) 20%, transparent)}}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500\/5{background-color:#fb2c360d}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/5{background-color:color-mix(in oklab, var(--color-red-500) 5%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-sidebar{background-color:var(--sidebar)}.bg-sidebar-accent{background-color:var(--sidebar-accent)}.bg-sidebar-border{background-color:var(--sidebar-border)}.bg-sidebar-primary{background-color:var(--sidebar-primary)}.bg-transparent{background-color:#0000}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-yellow-500{background-color:var(--color-yellow-500)}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--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-purple-500{--tw-gradient-to:var(--color-purple-500);--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:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.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)}.p-\[3px\]{padding:3px}.px-1{padding-inline:var(--spacing)}.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-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-0{padding-top:0}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-6{padding-top:calc(var(--spacing) * 6)}.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)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--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-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.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-amber-700{color:var(--color-amber-700)}.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-emerald-700{color:var(--color-emerald-700)}.text-foreground{color:var(--foreground)}.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-red-700{color:var(--color-red-700)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-sidebar-accent-foreground{color:var(--sidebar-accent-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/70{color:var(--sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.text-sidebar-foreground\/70{color:color-mix(in oklab, var(--sidebar-foreground) 70%, transparent)}}.text-sidebar-primary-foreground{color:var(--sidebar-primary-foreground)}.text-white{color:var(--color-white)}.text-yellow-700{color:var(--color-yellow-700)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.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)}.\[box-shadow\:var\(--shadow\)\]{box-shadow:var(--shadow)}.ring-ring{--tw-ring-color:var(--ring)}.ring-sidebar-ring{--tw-ring-color:var(--sidebar-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,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[grid-template-rows\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;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:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-\[cubic-bezier\(0\.4\,0\,0\.2\,1\)\]{--tw-ease:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.\[contain\:layout\]{contain:layout}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *){opacity:1}@media (hover:hover){.group-hover\:mt-0:is(:where(.group):hover *){margin-top:0}.group-hover\:mb-0:is(:where(.group):hover *){margin-bottom:0}.group-hover\:opacity-100:is(:where(.group):hover *),.group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *){opacity:1}}.group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar=menu-action]) *){padding-right:calc(var(--spacing) * 8)}.group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible=icon] *){margin-top:calc(var(--spacing) * -8)}.group-data-\[collapsible\=icon\]\:\!flex:is(:where(.group)[data-collapsible=icon] *){display:flex!important}.group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible=icon] *){display:none}.group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--spacing) * 8)!important;height:calc(var(--spacing) * 8)!important}.group-data-\[collapsible\=icon\]\:\!items-center:is(:where(.group)[data-collapsible=icon] *){align-items:center!important}.group-data-\[collapsible\=icon\]\:\!justify-center:is(:where(.group)[data-collapsible=icon] *){justify-content:center!important}.group-data-\[collapsible\=icon\]\:justify-center:is(:where(.group)[data-collapsible=icon] *){justify-content:center}.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible=icon] *){overflow:hidden}.group-data-\[collapsible\=icon\]\:\!rounded-full:is(:where(.group)[data-collapsible=icon] *){border-radius:3.40282e38px!important}.group-data-\[collapsible\=icon\]\:\!bg-sidebar-primary:is(:where(.group)[data-collapsible=icon] *){background-color:var(--sidebar-primary)!important}.group-data-\[collapsible\=icon\]\:\!bg-white:is(:where(.group)[data-collapsible=icon] *){background-color:var(--color-white)!important}.group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible=icon] *){padding:0!important}.group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 2)!important}.group-data-\[collapsible\=icon\]\:\!text-black:is(:where(.group)[data-collapsible=icon] *){color:var(--color-black)!important}.group-data-\[collapsible\=icon\]\:text-sidebar-primary-foreground:is(:where(.group)[data-collapsible=icon] *){color:var(--sidebar-primary-foreground)}.group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible=icon] *){opacity:0}.group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible=offcanvas] *){--tw-translate-x:0;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side=left] *){right:calc(var(--spacing) * -4)}.group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side=right] *){left:0}.group-data-\[side\=right\]\:group-data-\[collapsible\=offcanvas\]\:-translate-x-full:is(:where(.group)[data-side=right] *):is(:where(.group)[data-collapsible=offcanvas] *){--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant=floating] *){border-radius:var(--radius)}.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant=floating] *){border-style:var(--tw-border-style);border-width:1px}.group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.group)[data-variant=floating] *){border-color:var(--sidebar-border)}.group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant=floating] *){--tw-shadow:var(--shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button):hover~*){color:var(--sidebar-accent-foreground)}}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button)[data-active=true]~*){color:var(--sidebar-accent-foreground)}.peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-1rem\)\]:is(:where(.peer)[data-variant=inset]~*){min-height:calc(100svh - 1rem)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.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)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-inset-2:after{content:var(--tw-content);inset:calc(var(--spacing) * -2)}.after\:inset-y-0:after{content:var(--tw-content);inset-block:0}.after\:left-1\/2:after{content:var(--tw-content);left:50%}.after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible=offcanvas] *):after{content:var(--tw-content);left:100%}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.focus-within\:ring-2:focus-within{--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-within\:ring-ring:focus-within{--tw-ring-color:var(--ring)}.focus-within\:ring-offset-2:focus-within{--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)}@media (hover:hover){.hover\:gap-4:hover{gap:calc(var(--spacing) * 4)}.hover\:border-border:hover{border-color:var(--border)}.hover\:border-primary\/50:hover{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--primary) 50%, transparent)}}.hover\:bg-accent:hover,.hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.hover\:bg-background\/90:hover{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-background\/90:hover{background-color:color-mix(in oklab, var(--background) 90%, transparent)}}.hover\:bg-black\/70:hover{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/70:hover{background-color:color-mix(in oklab, var(--color-black) 70%, transparent)}}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-destructive\/80:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/80:hover{background-color:color-mix(in oklab, var(--destructive) 80%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-muted:hover,.hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.hover\:bg-primary:hover,.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab, var(--primary) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}.hover\:bg-sidebar-accent:hover,.hover\:bg-sidebar-accent\/90:hover{background-color:var(--sidebar-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-sidebar-accent\/90:hover{background-color:color-mix(in oklab, var(--sidebar-accent) 90%, transparent)}}.hover\:bg-yellow-600:hover{background-color:var(--color-yellow-600)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-destructive:hover{color:var(--destructive)}.hover\:text-foreground:hover,.hover\:text-foreground\/80:hover{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:text-foreground\/80:hover{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.hover\:text-primary-foreground:hover{color:var(--primary-foreground)}.hover\:text-sidebar-accent-foreground:hover{color:var(--sidebar-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-100:hover{opacity:1}.group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:is(:where(.group)[data-collapsible=offcanvas] *):hover{background-color:var(--sidebar)}.hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:var(--sidebar-border)}}.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-1:focus{--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\: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:.98}.active\:bg-sidebar-accent:active{background-color:var(--sidebar-accent)}.active\:text-sidebar-accent-foreground:active{color:var(--sidebar-accent-foreground)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]){background-color:var(--sidebar)}.aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{background-color:var(--sidebar-accent)}.data-\[active\=true\]\:font-medium[data-active=true]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{color:var(--sidebar-accent-foreground)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[selected\]\:bg-accent[data-selected]{background-color:var(--accent)}.data-\[selected\]\:text-accent-foreground[data-selected]{color:var(--accent-foreground)}.data-\[state\=closed\]\:duration-300[data-state=closed]{--tw-duration:.3s;transition-duration:.3s}.data-\[state\=open\]\:grid-rows-\[1fr\][data-state=open]{grid-template-rows:1fr}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--muted-foreground)}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.data-\[state\=open\]\:duration-500[data-state=open]{--tw-duration:.5s;transition-duration:.5s}@media (hover:hover){.data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state=open]:hover{background-color:var(--sidebar-accent)}.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state=open]:hover{color:var(--sidebar-accent-foreground)}}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))){.supports-\[backdrop-filter\]\:bg-background\/60{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.supports-\[backdrop-filter\]\:bg-background\/60{background-color:color-mix(in oklab, var(--background) 60%, transparent)}}}@media (min-width:40rem){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:w-auto{width:auto}.sm\:max-w-sm{max-width:var(--container-sm)}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-col{flex-direction:column}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:justify-end{justify-content:flex-end}.sm\:gap-2\.5{gap:calc(var(--spacing) * 2.5)}:where(.sm\:space-x-2>: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)))}:where(.sm\:space-x-6>: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{border-radius:var(--radius)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-4{padding-inline:calc(var(--spacing) * 4)}.sm\:text-left{text-align:left}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:min-h-min{min-height:min-content}.md\:max-w-\[420px\]{max-width:420px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:opacity-0{opacity:0}.md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant=inset]~*){margin:calc(var(--spacing) * 2)}.md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant=inset]~*){margin-left:0}.md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant=inset]~*){border-radius:calc(var(--radius) + 4px)}.md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant=inset]~*){--tw-shadow:var(--shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.after\:md\:hidden:after{content:var(--tw-content)}@media (min-width:48rem){.after\:md\:hidden:after{display:none}}@media (min-width:64rem){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}:where(.lg\:space-x-8>: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-green-500\/50:is(.dark *){border-color:#00c75880}@supports (color:color-mix(in lab, red, red)){.dark\:border-green-500\/50:is(.dark *){border-color:color-mix(in oklab, var(--color-green-500) 50%, transparent)}}.dark\:border-red-500\/50:is(.dark *){border-color:#fb2c3680}@supports (color:color-mix(in lab, red, red)){.dark\:border-red-500\/50:is(.dark *){border-color:color-mix(in oklab, var(--color-red-500) 50%, transparent)}}.dark\:border-yellow-500\/50:is(.dark *){border-color:#edb20080}@supports (color:color-mix(in lab, red, red)){.dark\:border-yellow-500\/50:is(.dark *){border-color:color-mix(in oklab, var(--color-yellow-500) 50%, transparent)}}.dark\:bg-amber-500\/10:is(.dark *){background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-amber-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.dark\:bg-blue-500\/10:is(.dark *){background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.dark\:bg-emerald-500\/10:is(.dark *){background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-emerald-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.dark\:bg-green-900\/20:is(.dark *){background-color:#0d542b33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-green-900\/20:is(.dark *){background-color:color-mix(in oklab, var(--color-green-900) 20%, transparent)}}.dark\:bg-green-900\/30:is(.dark *){background-color:#0d542b4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-green-900\/30:is(.dark *){background-color:color-mix(in oklab, var(--color-green-900) 30%, transparent)}}.dark\:bg-red-500\/10:is(.dark *){background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-red-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.dark\:bg-red-900\/20:is(.dark *){background-color:#82181a33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-red-900\/20:is(.dark *){background-color:color-mix(in oklab, var(--color-red-900) 20%, transparent)}}.dark\:bg-yellow-900\/20:is(.dark *){background-color:#733e0a33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-yellow-900\/20:is(.dark *){background-color:color-mix(in oklab, var(--color-yellow-900) 20%, transparent)}}.dark\:text-amber-400:is(.dark *){color:var(--color-amber-400)}.dark\:text-blue-400:is(.dark *){color:var(--color-blue-400)}.dark\:text-emerald-400:is(.dark *){color:var(--color-emerald-400)}.dark\:text-green-100:is(.dark *){color:var(--color-green-100)}.dark\:text-green-400:is(.dark *){color:var(--color-green-400)}.dark\:text-red-400:is(.dark *){color:var(--color-red-400)}.dark\:text-yellow-400:is(.dark *){color:var(--color-yellow-400)}.dark\:group-data-\[collapsible\=icon\]\:\!bg-black:is(.dark *):is(:where(.group)[data-collapsible=icon] *){background-color:var(--color-black)!important}.dark\:group-data-\[collapsible\=icon\]\:\!text-white:is(.dark *):is(:where(.group)[data-collapsible=icon] *){color:var(--color-white)!important}.\[\&_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:0}.\[\&\:\:-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:3.40282e38px}.\[\&\:\:-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:3.40282e38px}.\[\&\:\:-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:0}.\[\&\>i\]\:w-4>i{width:calc(var(--spacing) * 4)}.\[\&\>i\]\:shrink-0>i{flex-shrink:0}.\[\&\>i\]\:text-center>i{text-align:center}.\[\&\>p\]\:leading-7>p{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.\[\&\>p\:first-child\]\:mt-0>p:first-child{margin-top:0}.\[\&\>p\:last-child\]\:mb-0>p:last-child{margin-bottom:0}.\[\&\>span\]\:\!bg-sidebar-accent>span{background-color:var(--sidebar-accent)!important}.\[\&\>span\]\:\!text-sm>span{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.\[\&\>span\]\:\!font-semibold>span{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.\[\&\>span\]\:\!text-sidebar-accent-foreground>span{color:var(--sidebar-accent-foreground)!important}.group-data-\[collapsible\=icon\]\:\[\&\>span\]\:\!hidden:is(:where(.group)[data-collapsible=icon] *)>span{display:none!important}.group-data-\[collapsible\=icon\]\:\[\&\>span\]\:hidden:is(:where(.group)[data-collapsible=icon] *)>span{display:none}.\[\&\>span\:last-child\]\:truncate>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing) * 4)}.\[\&\>svg\]\:inline-block>svg{display:inline-block}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.\[\&\>svg\]\:text-amber-600>svg{color:var(--color-amber-600)}.\[\&\>svg\]\:text-blue-600>svg{color:var(--color-blue-600)}.\[\&\>svg\]\:text-destructive>svg{color:var(--destructive)}.\[\&\>svg\]\:text-emerald-600>svg{color:var(--color-emerald-600)}.\[\&\>svg\]\:text-foreground>svg{color:var(--foreground)}.\[\&\>svg\]\:text-green-600>svg{color:var(--color-green-600)}.\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.\[\&\>svg\]\:text-red-600>svg{color:var(--color-red-600)}.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{color:var(--sidebar-accent-foreground)}.\[\&\>svg\]\:text-yellow-600>svg{color:var(--color-yellow-600)}.dark\:\[\&\>svg\]\:text-amber-400:is(.dark *)>svg{color:var(--color-amber-400)}.dark\:\[\&\>svg\]\:text-blue-400:is(.dark *)>svg{color:var(--color-blue-400)}.dark\:\[\&\>svg\]\:text-emerald-400:is(.dark *)>svg{color:var(--color-emerald-400)}.dark\:\[\&\>svg\]\:text-red-400:is(.dark *)>svg{color:var(--color-red-400)}.\[\&\>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)}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize,[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}}:root{--background:oklch(99% 0 0);--foreground:oklch(0% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(0% 0 0);--popover:oklch(99% 0 0);--popover-foreground:oklch(0% 0 0);--primary:oklch(0% 0 0);--primary-foreground:oklch(100% 0 0);--secondary:oklch(94% 0 0);--secondary-foreground:oklch(0% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(44% 0 0);--accent:oklch(94% 0 0);--accent-foreground:oklch(0% 0 0);--destructive:oklch(63% .19 23.03);--destructive-foreground:oklch(100% 0 0);--border:oklch(92% 0 0);--input:oklch(94% 0 0);--ring:oklch(0% 0 0);--chart-1:oklch(81% .17 75.35);--chart-2:oklch(55% .22 264.53);--chart-3:oklch(72% 0 0);--chart-4:oklch(92% 0 0);--chart-5:oklch(56% 0 0);--sidebar:oklch(99% 0 0);--sidebar-foreground:oklch(0% 0 0);--sidebar-primary:oklch(0% 0 0);--sidebar-primary-foreground:oklch(100% 0 0);--sidebar-accent:oklch(94% 0 0);--sidebar-accent-foreground:oklch(0% 0 0);--sidebar-border:oklch(94% 0 0);--sidebar-ring:oklch(0% 0 0);--font-sans:Geist, sans-serif;--font-serif:Georgia, serif;--font-mono:Geist Mono, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:2px;--shadow-spread:0px;--shadow-opacity:.18;--shadow-color:#000;--shadow-2xs:0px 1px 2px 0px #00000017;--shadow-xs:0px 1px 2px 0px #00000017;--shadow-sm:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow-md:0px 1px 2px 0px #0000002e, 0px 2px 4px -1px #0000002e;--shadow-lg:0px 1px 2px 0px #0000002e, 0px 4px 6px -1px #0000002e;--shadow-xl:0px 1px 2px 0px #0000002e, 0px 8px 10px -1px #0000002e;--shadow-2xl:0px 1px 2px 0px #00000073;--tracking-normal:0em;--spacing:.25rem}.dark{--background:oklch(0% 0 0);--foreground:oklch(100% 0 0);--card:oklch(14% 0 0);--card-foreground:oklch(100% 0 0);--popover:oklch(18% 0 0);--popover-foreground:oklch(100% 0 0);--primary:oklch(100% 0 0);--primary-foreground:oklch(0% 0 0);--secondary:oklch(25% 0 0);--secondary-foreground:oklch(100% 0 0);--muted:oklch(23% 0 0);--muted-foreground:oklch(72% 0 0);--accent:oklch(32% 0 0);--accent-foreground:oklch(100% 0 0);--destructive:oklch(69% .2 23.91);--destructive-foreground:oklch(0% 0 0);--border:oklch(26% 0 0);--input:oklch(32% 0 0);--ring:oklch(72% 0 0);--chart-1:oklch(81% .17 75.35);--chart-2:oklch(58% .21 260.84);--chart-3:oklch(56% 0 0);--chart-4:oklch(44% 0 0);--chart-5:oklch(92% 0 0);--sidebar:oklch(18% 0 0);--sidebar-foreground:oklch(100% 0 0);--sidebar-primary:oklch(100% 0 0);--sidebar-primary-foreground:oklch(0% 0 0);--sidebar-accent:oklch(32% 0 0);--sidebar-accent-foreground:oklch(100% 0 0);--sidebar-border:oklch(32% 0 0);--sidebar-ring:oklch(72% 0 0);--font-sans:Geist, sans-serif;--font-serif:Georgia, serif;--font-mono:Geist Mono, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:2px;--shadow-spread:0px;--shadow-opacity:.18;--shadow-color:#000;--shadow-2xs:0px 1px 2px 0px #00000017;--shadow-xs:0px 1px 2px 0px #00000017;--shadow-sm:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow-md:0px 1px 2px 0px #0000002e, 0px 2px 4px -1px #0000002e;--shadow-lg:0px 1px 2px 0px #0000002e, 0px 4px 6px -1px #0000002e;--shadow-xl:0px 1px 2px 0px #0000002e, 0px 8px 10px -1px #0000002e;--shadow-2xl:0px 1px 2px 0px #00000073}html,body,:host{font-family:var(--font-sans)!important}@keyframes bars{0%,to{opacity:.7;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes bars-vertical{0%,to{opacity:.7;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes bars-pulse{0%,to{opacity:.5;transform:scaleY(.3)}50%{opacity:1;transform:scaleY(1)}}@keyframes orbit{0%{transform:translate(-50%, 0) rotate(0deg) translateX(calc((var(--size,1rem) - .5rem) / 2)) rotate(0deg)}to{transform:translate(-50%, 0) rotate(360deg) translateX(calc((var(--size,1rem) - .5rem) / 2)) rotate(-360deg)}}.apexcharts-canvas{background:0 0}.apexcharts-gridline{stroke:var(--border);stroke-opacity:.6}.apexcharts-text,.apexcharts-xaxis-label,.apexcharts-yaxis-label{fill:var(--muted-foreground);font-family:var(--font-sans)}.apexcharts-legend-text{font-family:var(--font-sans);color:var(--foreground)!important}.apexcharts-title-text{fill:var(--foreground);font-family:var(--font-sans)}.apexcharts-subtitle-text{fill:var(--muted-foreground);font-family:var(--font-sans)}.apexcharts-legend{flex-wrap:wrap;gap:12px;padding:0 0 12px;display:flex!important}.apexcharts-legend-series{gap:6px;align-items:center!important;margin:0!important;display:inline-flex!important}.apexcharts-legend-marker{flex-shrink:0;vertical-align:middle!important;border:none!important;border-radius:9999px!important;margin:0!important}.shellui-chart-tooltip{background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);box-shadow:var(--shadow-md);font-family:var(--font-sans);min-width:0;max-width:220px;overflow:hidden}.shellui-chart-tooltip-title{color:var(--foreground);border-bottom:1px solid var(--border);white-space:nowrap;padding:4px 8px;font-size:12px;font-weight:600}.shellui-chart-tooltip-body{flex-direction:column;gap:3px;padding:4px 8px;display:flex}.shellui-chart-tooltip-row{white-space:nowrap;grid-template-columns:10px 1fr auto;align-items:center;gap:6px;font-size:12px;line-height:1.2;display:grid}.shellui-chart-tooltip-marker{border-radius:2px;width:10px;height:10px;display:block}.shellui-chart-tooltip-label{color:var(--muted-foreground);font-weight:500}.shellui-chart-tooltip-value{color:var(--foreground);font-variant-numeric:tabular-nums;padding-left:12px;font-weight:600}.apexcharts-tooltip{box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.apexcharts-xcrosshairs,.apexcharts-ycrosshairs{stroke:var(--border);stroke-dasharray:3}.apexcharts-toolbar{z-index:10}.apexcharts-toolbar-item{color:var(--muted-foreground);transition:color .15s}.apexcharts-toolbar-item:hover{color:var(--foreground)}.apexcharts-menu{background:var(--popover);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);box-shadow:var(--shadow-lg);padding:4px}.apexcharts-menu-item{color:var(--foreground);border-radius:calc(var(--radius) - 4px);padding:6px 10px;font-size:13px;transition:background-color .15s}.apexcharts-menu-item:hover{background:var(--accent);color:var(--accent-foreground)}.apexcharts-datalabel,.apexcharts-datalabel-label,.apexcharts-datalabel-value{fill:var(--foreground);font-family:var(--font-sans);font-weight:500}#blazor-error-ui{background:var(--destructive);color:var(--destructive-foreground);z-index:9999;text-align:center;padding:1rem;display:none;position:fixed;top:0;left:0;right:0}#blazor-error-ui.show{display:block}#blazor-error-ui a{color:inherit;margin:0 .5rem;text-decoration:underline}#blazor-error-ui a:hover{opacity:.8}@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}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scrollbar-thumb{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-scrollbar-track{syntax:"<color>";inherits:false;initial-value:#0000}@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-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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:0}@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}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
\ No newline at end of file
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:""}}}@layer theme{:root,:host{--font-sans:var(--font-sans);--font-serif:var(--font-serif);--font-mono:var(--font-mono);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-yellow-900:oklch(42.1% .095 57.708);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-900:oklch(39.3% .095 152.535);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-900:oklch(37.9% .146 265.522);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .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:-.025em;--leading-tight:1.25;--leading-relaxed:1.625;--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-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--blur-sm:8px;--blur-md:12px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--shadow:var(--shadow)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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;-webkit-text-decoration: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{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.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{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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:currentColor}@supports (color:color-mix(in lab, red, red)){::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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}h1:focus{outline:none}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.top-0{top:0}.top-1\.5{top:calc(var(--spacing) * 1.5)}.top-1\/2{top:50%}.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-\[15vh\]{top:15vh}.top-\[50\%\]{top:50%}.top-full{top:100%}.right-0{right:0}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.right-full{right:100%}.bottom-0{bottom:0}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-3\.5{left:calc(var(--spacing) * 3.5)}.left-4{left:calc(var(--spacing) * 4)}.left-\[50\%\]{left:50%}.left-full{left:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-2{margin-inline:calc(var(--spacing) * -2)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-3\.5{margin-inline:calc(var(--spacing) * 3.5)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.my-1{margin-block:var(--spacing)}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.-mt-20{margin-top:calc(var(--spacing) * -20)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.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-10{margin-top:calc(var(--spacing) * 10)}.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-20{margin-bottom:calc(var(--spacing) * -20)}.mb-1{margin-bottom:var(--spacing)}.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:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-4{margin-left:calc(var(--spacing) * 4)}.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{display:inline}.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}.aspect-video{aspect-ratio:var(--aspect-video)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-1\/2{height:50%}.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-svh{height:100svh}.max-h-48{max-height:calc(var(--spacing) * 48)}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-\[90vh\]{max-height:90vh}.max-h-\[min\(360px\,55vh\)\]{max-height:min(360px,55vh)}.max-h-screen{max-height:100vh}.\!min-h-0{min-height:0!important}.min-h-0{min-height:0}.min-h-7{min-height:calc(var(--spacing) * 7)}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-\[50vh\]{min-height:50vh}.min-h-\[60px\]{min-height:60px}.min-h-\[80px\]{min-height:80px}.min-h-\[160px\]{min-height:160px}.min-h-\[420px\]{min-height:420px}.min-h-screen{min-height:100vh}.min-h-svh{min-height:100svh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/2{width:50%}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-2\/3{width:66.6667%}.w-2\/5{width:40%}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-3\/4{width:75%}.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-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-\[380px\]{width:380px}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-\[80\%\]{max-width:80%}.max-w-\[90vw\]{max-width:90vw}.max-w-\[400px\]{max-width:400px}.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-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-9{min-width:calc(var(--spacing) * 9)}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-\[8rem\]{min-width:8rem}.min-w-\[640px\]{min-width:640px}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}.origin-top-right{transform-origin:100% 0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0{--tw-translate-x: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-x-px{--tw-translate-x:1px;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-90{rotate:90deg}.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}.resize{resize:both}.resize-none{resize:none}.scrollbar-thin{scrollbar-width:thin}.scrollbar-thumb-border{--tw-scrollbar-thumb:var(--border);scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.scrollbar-track-transparent{--tw-scrollbar-track:transparent;scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.\[appearance\:textfield\]{appearance:textfield}.appearance-none{appearance:none}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-rows-\[0fr\]{grid-template-rows:0fr}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.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{gap:0}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.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)}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block:0}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>: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)))}:where(.space-y-2>: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)))}:where(.space-y-3>: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)))}:where(.space-y-4>: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)))}:where(.space-y-6>: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)))}:where(.space-y-8>: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)))}.gap-x-2{column-gap:calc(var(--spacing) * 2)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(var(--spacing) * var(--tw-space-x-reverse));margin-inline-end:calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>: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)))}:where(.space-x-4>: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)))}:where(.space-x-6>: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{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.\[border-radius\:var\(--radius\)\]{border-radius:var(--radius)}.rounded{border-radius:.25rem}.rounded-\[2px\]{border-radius:2px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{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}.rounded-b-xl{border-bottom-right-radius:calc(var(--radius) + 4px);border-bottom-left-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.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-border,.border-border\/40{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/40{border-color:color-mix(in oklab, var(--border) 40%, transparent)}}.border-destructive{border-color:var(--destructive)}.border-green-500{border-color:var(--color-green-500)}.border-input{border-color:var(--input)}.border-muted{border-color:var(--muted)}.border-primary,.border-primary\/40{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/40{border-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.border-ring{border-color:var(--ring)}.border-sidebar-border{border-color:var(--sidebar-border)}.border-transparent{border-color:#0000}.bg-accent,.bg-accent\/30{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/30{background-color:color-mix(in oklab, var(--accent) 30%, transparent)}}.bg-accent\/50{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/50{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.bg-amber-500\/5{background-color:#f99c000d}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/5{background-color:color-mix(in oklab, var(--color-amber-500) 5%, transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/95{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/95{background-color:color-mix(in oklab, var(--background) 95%, transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.bg-black\/80{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-500\/5{background-color:#3080ff0d}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/5{background-color:color-mix(in oklab, var(--color-blue-500) 5%, transparent)}}.bg-blue-500\/20{background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/20{background-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/50{background-color:var(--card)}@supports (color:color-mix(in lab, red, red)){.bg-card\/50{background-color:color-mix(in oklab, var(--card) 50%, transparent)}}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--destructive)}.bg-emerald-500\/5{background-color:#00bb7f0d}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/5{background-color:color-mix(in oklab, var(--color-emerald-500) 5%, transparent)}}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/10{background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.bg-green-50{background-color:var(--color-green-50)}.bg-green-500{background-color:var(--color-green-500)}.bg-green-500\/20{background-color:#00c75833}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/20{background-color:color-mix(in oklab, var(--color-green-500) 20%, transparent)}}.bg-input{background-color:var(--input)}.bg-muted{background-color:var(--muted)}.bg-muted-foreground{background-color:var(--muted-foreground)}.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.bg-popover{background-color:var(--popover)}.bg-primary,.bg-primary\/5{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--primary) 20%, transparent)}}.bg-red-500\/5{background-color:#fb2c360d}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/5{background-color:color-mix(in oklab, var(--color-red-500) 5%, transparent)}}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-sidebar{background-color:var(--sidebar)}.bg-sidebar-accent{background-color:var(--sidebar-accent)}.bg-sidebar-border{background-color:var(--sidebar-border)}.bg-sidebar-primary{background-color:var(--sidebar-primary)}.bg-transparent{background-color:#0000}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-yellow-500{background-color:var(--color-yellow-500)}.bg-yellow-500\/20{background-color:#edb20033}@supports (color:color-mix(in lab, red, red)){.bg-yellow-500\/20{background-color:color-mix(in oklab, var(--color-yellow-500) 20%, transparent)}}.fill-primary-foreground{fill:var(--primary-foreground)}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.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)}.p-\[3px\]{padding:3px}.px-1{padding-inline:var(--spacing)}.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) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-0{padding-top:0}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-6{padding-top:calc(var(--spacing) * 6)}.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)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pb-0\.5{padding-bottom:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.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-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--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-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.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}.whitespace-pre-line{white-space:pre-line}.text-accent-foreground{color:var(--accent-foreground)}.text-amber-700{color:var(--color-amber-700)}.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-emerald-500{color:var(--color-emerald-500)}.text-emerald-600{color:var(--color-emerald-600)}.text-emerald-700{color:var(--color-emerald-700)}.text-foreground,.text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.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-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-sidebar-accent-foreground{color:var(--sidebar-accent-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/70{color:var(--sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.text-sidebar-foreground\/70{color:color-mix(in oklab, var(--sidebar-foreground) 70%, transparent)}}.text-sidebar-primary-foreground{color:var(--sidebar-primary-foreground)}.text-white{color:var(--color-white)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:var(--shadow-2xl);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.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-4{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + 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)}.\[box-shadow\:var\(--shadow\)\]{box-shadow:var(--shadow)}.ring-primary\/20{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/20{--tw-ring-color:color-mix(in oklab, var(--primary) 20%, transparent)}}.ring-ring{--tw-ring-color:var(--ring)}.ring-sidebar-ring{--tw-ring-color:var(--sidebar-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,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[grid-template-rows\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;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-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-\[cubic-bezier\(0\.4\,0\,0\.2\,1\)\]{--tw-ease:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.\[contain\:layout\]{contain:layout}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\[animation-delay\:-0\.3s\]{animation-delay:-.3s}.\[animation-delay\:-0\.15s\]{animation-delay:-.15s}.group-first\:top-3\.5:is(:where(.group):first-child *){top:calc(var(--spacing) * 3.5)}.group-last\:bottom-auto:is(:where(.group):last-child *){bottom:auto}.group-last\:h-3\.5:is(:where(.group):last-child *){height:calc(var(--spacing) * 3.5)}.group-only\:hidden:is(:where(.group):only-child *){display:none}.group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *){opacity:1}@media (hover:hover){.group-hover\:mt-0:is(:where(.group):hover *){margin-top:0}.group-hover\:mb-0:is(:where(.group):hover *){margin-bottom:0}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:opacity-100:is(:where(.group):hover *),.group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *){opacity:1}}.group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar=menu-action]) *){padding-right:calc(var(--spacing) * 8)}.group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible=icon] *){margin-top:calc(var(--spacing) * -8)}.group-data-\[collapsible\=icon\]\:\!flex:is(:where(.group)[data-collapsible=icon] *){display:flex!important}.group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible=icon] *){display:none}.group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible=icon] *){width:calc(var(--spacing) * 8)!important;height:calc(var(--spacing) * 8)!important}.group-data-\[collapsible\=icon\]\:\!items-center:is(:where(.group)[data-collapsible=icon] *){align-items:center!important}.group-data-\[collapsible\=icon\]\:\!justify-center:is(:where(.group)[data-collapsible=icon] *){justify-content:center!important}.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible=icon] *){overflow:hidden}.group-data-\[collapsible\=icon\]\:\!rounded-full:is(:where(.group)[data-collapsible=icon] *){border-radius:3.40282e38px!important}.group-data-\[collapsible\=icon\]\:\!bg-sidebar-primary:is(:where(.group)[data-collapsible=icon] *){background-color:var(--sidebar-primary)!important}.group-data-\[collapsible\=icon\]\:\!bg-white:is(:where(.group)[data-collapsible=icon] *){background-color:var(--color-white)!important}.group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible=icon] *){padding:0!important}.group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible=icon] *){padding:calc(var(--spacing) * 2)!important}.group-data-\[collapsible\=icon\]\:\!text-black:is(:where(.group)[data-collapsible=icon] *){color:var(--color-black)!important}.group-data-\[collapsible\=icon\]\:text-sidebar-primary-foreground:is(:where(.group)[data-collapsible=icon] *){color:var(--sidebar-primary-foreground)}.group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible=icon] *){opacity:0}.group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible=offcanvas] *){--tw-translate-x:0;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side=left] *){right:calc(var(--spacing) * -4)}.group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side=right] *){left:0}.group-data-\[side\=right\]\:group-data-\[collapsible\=offcanvas\]\:-translate-x-full:is(:where(.group)[data-side=right] *):is(:where(.group)[data-collapsible=offcanvas] *){--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant=floating] *){border-radius:var(--radius)}.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant=floating] *){border-style:var(--tw-border-style);border-width:1px}.group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.group)[data-variant=floating] *){border-color:var(--sidebar-border)}.group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant=floating] *){--tw-shadow:var(--shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button):hover~*){color:var(--sidebar-accent-foreground)}}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button)[data-active=true]~*){color:var(--sidebar-accent-foreground)}.peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-1rem\)\]:is(:where(.peer)[data-variant=inset]~*){min-height:calc(100svh - 1rem)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.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)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:-inset-2:after{content:var(--tw-content);inset:calc(var(--spacing) * -2)}.after\:inset-y-0:after{content:var(--tw-content);inset-block:0}.after\:left-1\/2:after{content:var(--tw-content);left:50%}.after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible=offcanvas] *):after{content:var(--tw-content);left:100%}.first\:pt-1\.5:first-child{padding-top:calc(var(--spacing) * 1.5)}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.last\:pb-0:last-child{padding-bottom:0}.focus-within\:ring-2:focus-within{--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-within\:ring-ring:focus-within{--tw-ring-color:var(--ring)}.focus-within\:ring-offset-2:focus-within{--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)}@media (hover:hover){.hover\:gap-4:hover{gap:calc(var(--spacing) * 4)}.hover\:border-border:hover{border-color:var(--border)}.hover\:border-primary\/50:hover{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--primary) 50%, transparent)}}.hover\:bg-accent:hover,.hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab, var(--accent) 50%, transparent)}}.hover\:bg-background\/90:hover{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-background\/90:hover{background-color:color-mix(in oklab, var(--background) 90%, transparent)}}.hover\:bg-black\/70:hover{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/70:hover{background-color:color-mix(in oklab, var(--color-black) 70%, transparent)}}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-destructive\/80:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/80:hover{background-color:color-mix(in oklab, var(--destructive) 80%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-muted:hover,.hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.hover\:bg-primary:hover,.hover\:bg-primary\/10:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/10:hover{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab, var(--primary) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}.hover\:bg-sidebar-accent:hover,.hover\:bg-sidebar-accent\/90:hover{background-color:var(--sidebar-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-sidebar-accent\/90:hover{background-color:color-mix(in oklab, var(--sidebar-accent) 90%, transparent)}}.hover\:bg-white\/20:hover{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/20:hover{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.hover\:bg-yellow-600:hover{background-color:var(--color-yellow-600)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-destructive:hover{color:var(--destructive)}.hover\:text-foreground:hover,.hover\:text-foreground\/80:hover{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:text-foreground\/80:hover{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.hover\:text-primary-foreground:hover{color:var(--primary-foreground)}.hover\:text-sidebar-accent-foreground:hover{color:var(--sidebar-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-100:hover{opacity:1}.group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:is(:where(.group)[data-collapsible=offcanvas] *):hover{background-color:var(--sidebar)}.hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:var(--sidebar-border)}}.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-1:focus{--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\: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:.98}.active\:bg-sidebar-accent:active{background-color:var(--sidebar-accent)}.active\:text-sidebar-accent-foreground:active{color:var(--sidebar-accent-foreground)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]){background-color:var(--sidebar)}.aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{background-color:var(--sidebar-accent)}.data-\[active\=true\]\:font-medium[data-active=true]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{color:var(--sidebar-accent-foreground)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[state\=closed\]\:duration-300[data-state=closed]{--tw-duration:.3s;transition-duration:.3s}.data-\[state\=open\]\:grid-rows-\[1fr\][data-state=open]{grid-template-rows:1fr}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--muted-foreground)}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.data-\[state\=open\]\:duration-500[data-state=open]{--tw-duration:.5s;transition-duration:.5s}@media (hover:hover){.data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state=open]:hover{background-color:var(--sidebar-accent)}.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state=open]:hover{color:var(--sidebar-accent-foreground)}}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))){.supports-\[backdrop-filter\]\:bg-background\/60{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.supports-\[backdrop-filter\]\:bg-background\/60{background-color:color-mix(in oklab, var(--background) 60%, transparent)}}}@media (prefers-reduced-motion:reduce){.motion-reduce\:animate-none{animation:none}.motion-reduce\:transition-none{transition-property:none}}@media (min-width:40rem){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:w-auto{width:auto}.sm\:max-w-sm{max-width:var(--container-sm)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:flex-col{flex-direction:column}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:justify-end{justify-content:flex-end}.sm\:gap-2\.5{gap:calc(var(--spacing) * 2.5)}:where(.sm\:space-x-2>: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)))}:where(.sm\:space-x-6>: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{border-radius:var(--radius)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:text-left{text-align:left}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:min-h-min{min-height:min-content}.md\:max-w-\[420px\]{max-width:420px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:opacity-0{opacity:0}.md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant=inset]~*){margin:calc(var(--spacing) * 2)}.md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant=inset]~*){margin-left:0}.md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant=inset]~*){border-radius:calc(var(--radius) + 4px)}.md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant=inset]~*){--tw-shadow:var(--shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.after\:md\:hidden:after{content:var(--tw-content)}@media (min-width:48rem){.after\:md\:hidden:after{display:none}}@media (min-width:64rem){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}:where(.lg\:space-x-8>: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\:bg-amber-500\/10:is(.dark *){background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-amber-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.dark\:bg-blue-500\/10:is(.dark *){background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.dark\:bg-blue-900\/30:is(.dark *){background-color:#1c398e4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/30:is(.dark *){background-color:color-mix(in oklab, var(--color-blue-900) 30%, transparent)}}.dark\:bg-emerald-500\/10:is(.dark *){background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-emerald-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.dark\:bg-green-900\/20:is(.dark *){background-color:#0d542b33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-green-900\/20:is(.dark *){background-color:color-mix(in oklab, var(--color-green-900) 20%, transparent)}}.dark\:bg-green-900\/30:is(.dark *){background-color:#0d542b4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-green-900\/30:is(.dark *){background-color:color-mix(in oklab, var(--color-green-900) 30%, transparent)}}.dark\:bg-red-500\/10:is(.dark *){background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-red-500\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.dark\:bg-yellow-900\/30:is(.dark *){background-color:#733e0a4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-yellow-900\/30:is(.dark *){background-color:color-mix(in oklab, var(--color-yellow-900) 30%, transparent)}}.dark\:text-amber-400:is(.dark *){color:var(--color-amber-400)}.dark\:text-blue-100:is(.dark *){color:var(--color-blue-100)}.dark\:text-blue-400:is(.dark *){color:var(--color-blue-400)}.dark\:text-emerald-400:is(.dark *){color:var(--color-emerald-400)}.dark\:text-green-100:is(.dark *){color:var(--color-green-100)}.dark\:text-green-400:is(.dark *){color:var(--color-green-400)}.dark\:text-red-400:is(.dark *){color:var(--color-red-400)}.dark\:text-yellow-100:is(.dark *){color:var(--color-yellow-100)}.dark\:text-yellow-400:is(.dark *){color:var(--color-yellow-400)}.dark\:group-data-\[collapsible\=icon\]\:\!bg-black:is(.dark *):is(:where(.group)[data-collapsible=icon] *){background-color:var(--color-black)!important}.dark\:group-data-\[collapsible\=icon\]\:\!text-white:is(.dark *):is(:where(.group)[data-collapsible=icon] *){color:var(--color-white)!important}@starting-style{.starting\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@starting-style{.starting\:opacity-0{opacity:0}}.\[\&_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:0}.\[\&\:\:-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:3.40282e38px}.\[\&\:\:-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-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\:\:-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:3.40282e38px}.\[\&\:\:-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:0}.\[\&\>\*\]\:absolute>*{position:absolute}.\[\&\>\*\]\:inset-0>*{inset:0}.\[\&\>\*\]\:h-full>*{height:100%}.\[\&\>\*\]\:w-full>*{width:100%}.\[\&\>\*\]\:rounded-none>*{border-radius:0}.\[\&\>\*\]\:focus-visible\:z-10>:focus-visible{z-index:10}.\[\&\>\*\:first-child\]\:rounded-t-md>:first-child{border-top-left-radius:calc(var(--radius) - 2px);border-top-right-radius:calc(var(--radius) - 2px)}.\[\&\>\*\:first-child\]\:rounded-l-md>:first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.\[\&\>\*\:last-child\]\:rounded-r-md>:last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\>\*\:last-child\]\:rounded-b-md>:last-child{border-bottom-right-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.\[\&\>\*\:not\(\:first-child\)\]\:-mt-px>:not(:first-child){margin-top:-1px}.\[\&\>\*\:not\(\:first-child\)\]\:-ml-px>:not(:first-child){margin-left:-1px}.\[\&\>i\]\:w-4>i{width:calc(var(--spacing) * 4)}.\[\&\>i\]\:shrink-0>i{flex-shrink:0}.\[\&\>i\]\:text-center>i{text-align:center}.\[\&\>p\]\:leading-7>p{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.\[\&\>p\:first-child\]\:mt-0>p:first-child{margin-top:0}.\[\&\>p\:last-child\]\:mb-0>p:last-child{margin-bottom:0}.\[\&\>span\]\:\!bg-sidebar-accent>span{background-color:var(--sidebar-accent)!important}.\[\&\>span\]\:\!text-sm>span{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}.\[\&\>span\]\:\!font-semibold>span{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.\[\&\>span\]\:\!text-sidebar-accent-foreground>span{color:var(--sidebar-accent-foreground)!important}.group-data-\[collapsible\=icon\]\:\[\&\>span\]\:\!hidden:is(:where(.group)[data-collapsible=icon] *)>span{display:none!important}.\[\&\>span\:last-child\]\:truncate>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing) * 4)}.\[\&\>svg\]\:inline-block>svg{display:inline-block}.\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.\[\&\>svg\]\:text-amber-600>svg{color:var(--color-amber-600)}.\[\&\>svg\]\:text-blue-600>svg{color:var(--color-blue-600)}.\[\&\>svg\]\:text-destructive>svg{color:var(--destructive)}.\[\&\>svg\]\:text-emerald-600>svg{color:var(--color-emerald-600)}.\[\&\>svg\]\:text-foreground>svg{color:var(--foreground)}.\[\&\>svg\]\:text-green-600>svg{color:var(--color-green-600)}.\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.\[\&\>svg\]\:text-red-600>svg{color:var(--color-red-600)}.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{color:var(--sidebar-accent-foreground)}.\[\&\>svg\]\:text-yellow-600>svg{color:var(--color-yellow-600)}.dark\:\[\&\>svg\]\:text-amber-400:is(.dark *)>svg{color:var(--color-amber-400)}.dark\:\[\&\>svg\]\:text-blue-400:is(.dark *)>svg{color:var(--color-blue-400)}.dark\:\[\&\>svg\]\:text-emerald-400:is(.dark *)>svg{color:var(--color-emerald-400)}.dark\:\[\&\>svg\]\:text-red-400:is(.dark *)>svg{color:var(--color-red-400)}.\[\&\>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)}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize,[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}}:root{--background:oklch(99% 0 0);--foreground:oklch(0% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(0% 0 0);--popover:oklch(99% 0 0);--popover-foreground:oklch(0% 0 0);--primary:oklch(0% 0 0);--primary-foreground:oklch(100% 0 0);--secondary:oklch(94% 0 0);--secondary-foreground:oklch(0% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(44% 0 0);--accent:oklch(94% 0 0);--accent-foreground:oklch(0% 0 0);--destructive:oklch(63% .19 23.03);--destructive-foreground:oklch(100% 0 0);--border:oklch(92% 0 0);--input:oklch(94% 0 0);--ring:oklch(0% 0 0);--chart-1:oklch(81% .17 75.35);--chart-2:oklch(55% .22 264.53);--chart-3:oklch(72% 0 0);--chart-4:oklch(92% 0 0);--chart-5:oklch(56% 0 0);--sidebar:oklch(99% 0 0);--sidebar-foreground:oklch(0% 0 0);--sidebar-primary:oklch(0% 0 0);--sidebar-primary-foreground:oklch(100% 0 0);--sidebar-accent:oklch(94% 0 0);--sidebar-accent-foreground:oklch(0% 0 0);--sidebar-border:oklch(94% 0 0);--sidebar-ring:oklch(0% 0 0);--font-sans:Geist, sans-serif;--font-serif:Georgia, serif;--font-mono:Geist Mono, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:2px;--shadow-spread:0px;--shadow-opacity:.18;--shadow-color:#000;--shadow-2xs:0px 1px 2px 0px #00000017;--shadow-xs:0px 1px 2px 0px #00000017;--shadow-sm:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow-md:0px 1px 2px 0px #0000002e, 0px 2px 4px -1px #0000002e;--shadow-lg:0px 1px 2px 0px #0000002e, 0px 4px 6px -1px #0000002e;--shadow-xl:0px 1px 2px 0px #0000002e, 0px 8px 10px -1px #0000002e;--shadow-2xl:0px 1px 2px 0px #00000073;--tracking-normal:0em;--spacing:.25rem}.dark{--background:oklch(0% 0 0);--foreground:oklch(100% 0 0);--card:oklch(14% 0 0);--card-foreground:oklch(100% 0 0);--popover:oklch(18% 0 0);--popover-foreground:oklch(100% 0 0);--primary:oklch(100% 0 0);--primary-foreground:oklch(0% 0 0);--secondary:oklch(25% 0 0);--secondary-foreground:oklch(100% 0 0);--muted:oklch(23% 0 0);--muted-foreground:oklch(72% 0 0);--accent:oklch(32% 0 0);--accent-foreground:oklch(100% 0 0);--destructive:oklch(69% .2 23.91);--destructive-foreground:oklch(0% 0 0);--border:oklch(26% 0 0);--input:oklch(32% 0 0);--ring:oklch(72% 0 0);--chart-1:oklch(81% .17 75.35);--chart-2:oklch(58% .21 260.84);--chart-3:oklch(56% 0 0);--chart-4:oklch(44% 0 0);--chart-5:oklch(92% 0 0);--sidebar:oklch(18% 0 0);--sidebar-foreground:oklch(100% 0 0);--sidebar-primary:oklch(100% 0 0);--sidebar-primary-foreground:oklch(0% 0 0);--sidebar-accent:oklch(32% 0 0);--sidebar-accent-foreground:oklch(100% 0 0);--sidebar-border:oklch(32% 0 0);--sidebar-ring:oklch(72% 0 0);--font-sans:Geist, sans-serif;--font-serif:Georgia, serif;--font-mono:Geist Mono, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:2px;--shadow-spread:0px;--shadow-opacity:.18;--shadow-color:#000;--shadow-2xs:0px 1px 2px 0px #00000017;--shadow-xs:0px 1px 2px 0px #00000017;--shadow-sm:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow:0px 1px 2px 0px #0000002e, 0px 1px 2px -1px #0000002e;--shadow-md:0px 1px 2px 0px #0000002e, 0px 2px 4px -1px #0000002e;--shadow-lg:0px 1px 2px 0px #0000002e, 0px 4px 6px -1px #0000002e;--shadow-xl:0px 1px 2px 0px #0000002e, 0px 8px 10px -1px #0000002e;--shadow-2xl:0px 1px 2px 0px #00000073}html,body,:host{font-family:var(--font-sans)!important}@keyframes bars{0%,to{opacity:.7;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes bars-vertical{0%,to{opacity:.7;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes bars-pulse{0%,to{opacity:.5;transform:scaleY(.3)}50%{opacity:1;transform:scaleY(1)}}@keyframes orbit{0%{transform:translate(-50%, 0) rotate(0deg) translateX(calc((var(--size,1rem) - .5rem) / 2)) rotate(0deg)}to{transform:translate(-50%, 0) rotate(360deg) translateX(calc((var(--size,1rem) - .5rem) / 2)) rotate(-360deg)}}.apexcharts-canvas{background:0 0}.apexcharts-gridline{stroke:var(--border);stroke-opacity:.6}.apexcharts-text,.apexcharts-xaxis-label,.apexcharts-yaxis-label{fill:var(--muted-foreground);font-family:var(--font-sans)}.apexcharts-legend-text{font-family:var(--font-sans);color:var(--foreground)!important}.apexcharts-title-text{fill:var(--foreground);font-family:var(--font-sans)}.apexcharts-subtitle-text{fill:var(--muted-foreground);font-family:var(--font-sans)}.apexcharts-legend{flex-wrap:wrap;gap:12px;padding:0 0 12px;display:flex!important}.apexcharts-legend-series{gap:6px;align-items:center!important;margin:0!important;display:inline-flex!important}.apexcharts-legend-marker{flex-shrink:0;vertical-align:middle!important;border:none!important;border-radius:9999px!important;margin:0!important}.shellui-chart-tooltip{background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);box-shadow:var(--shadow-md);font-family:var(--font-sans);min-width:0;max-width:220px;overflow:hidden}.shellui-chart-tooltip-title{color:var(--foreground);border-bottom:1px solid var(--border);white-space:nowrap;padding:4px 8px;font-size:12px;font-weight:600}.shellui-chart-tooltip-body{flex-direction:column;gap:3px;padding:4px 8px;display:flex}.shellui-chart-tooltip-row{white-space:nowrap;grid-template-columns:10px 1fr auto;align-items:center;gap:6px;font-size:12px;line-height:1.2;display:grid}.shellui-chart-tooltip-marker{border-radius:2px;width:10px;height:10px;display:block}.shellui-chart-tooltip-label{color:var(--muted-foreground);font-weight:500}.shellui-chart-tooltip-value{color:var(--foreground);font-variant-numeric:tabular-nums;padding-left:12px;font-weight:600}.apexcharts-tooltip{box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.apexcharts-xcrosshairs,.apexcharts-ycrosshairs{stroke:var(--border);stroke-dasharray:3}.apexcharts-toolbar{z-index:10}.apexcharts-toolbar-item{color:var(--muted-foreground);transition:color .15s}.apexcharts-toolbar-item:hover{color:var(--foreground)}.apexcharts-menu{background:var(--popover);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);box-shadow:var(--shadow-lg);padding:4px}.apexcharts-menu-item{color:var(--foreground);border-radius:calc(var(--radius) - 4px);padding:6px 10px;font-size:13px;transition:background-color .15s}.apexcharts-menu-item:hover{background:var(--accent);color:var(--accent-foreground)}.apexcharts-datalabel,.apexcharts-datalabel-label,.apexcharts-datalabel-value{fill:var(--foreground);font-family:var(--font-sans);font-weight:500}#blazor-error-ui{background:var(--destructive);color:var(--destructive-foreground);z-index:9999;text-align:center;padding:1rem;display:none;position:fixed;top:0;left:0;right:0}#blazor-error-ui.show{display:block}#blazor-error-ui a{color:inherit;margin:0 .5rem;text-decoration:underline}#blazor-error-ui a:hover{opacity:.8}@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}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scrollbar-thumb{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-scrollbar-track{syntax:"<color>";inherits:false;initial-value:#0000}@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-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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:0}@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}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
\ No newline at end of file
diff --git a/NET10/BlazorInteractiveServer/wwwroot/css/charts.css b/NET10/BlazorInteractiveServer/wwwroot/css/charts.css
new file mode 100644
index 0000000..6839e0f
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/wwwroot/css/charts.css
@@ -0,0 +1,149 @@
+/* ==========================================================
+   ShellUI Chart Styles — ApexCharts chrome tuned to shadcn/ui
+   Auto-installed by: shellui add chart
+   Add to your App.razor or _Host.cshtml:
+     <link href="css/charts.css" rel="stylesheet" />
+   ========================================================== */
+
+.apexcharts-canvas { background: transparent; }
+
+/* Gridlines — subtle horizontal dashes */
+.apexcharts-gridline {
+    stroke: var(--border);
+    stroke-opacity: 0.6;
+}
+
+/* Axis + legend text */
+.apexcharts-text,
+.apexcharts-xaxis-label,
+.apexcharts-yaxis-label {
+    fill: var(--muted-foreground);
+    font-family: inherit;
+}
+.apexcharts-legend-text {
+    color: var(--foreground) !important;
+    font-family: inherit;
+}
+
+/* Title + subtitle */
+.apexcharts-title-text { fill: var(--foreground); font-family: inherit; }
+.apexcharts-subtitle-text { fill: var(--muted-foreground); font-family: inherit; }
+
+/* Legend — top-left, circle markers */
+.apexcharts-legend {
+    display: flex !important;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 0 0 12px 0;
+}
+.apexcharts-legend-series {
+    display: inline-flex !important;
+    align-items: center !important;
+    margin: 0 !important;
+    gap: 6px;
+}
+.apexcharts-legend-marker {
+    border-radius: 9999px !important;
+    border: none !important;
+    margin: 0 !important;
+    vertical-align: middle !important;
+    flex-shrink: 0;
+}
+
+/* Custom shellui tooltip — compact shadcn look */
+.shellui-chart-tooltip {
+    background: var(--popover);
+    color: var(--popover-foreground);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px);
+    box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.1);
+    font-family: inherit;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 220px;
+}
+.shellui-chart-tooltip-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--foreground);
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+}
+.shellui-chart-tooltip-body {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 4px 8px;
+}
+.shellui-chart-tooltip-row {
+    display: grid;
+    grid-template-columns: 10px 1fr auto;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+.shellui-chart-tooltip-marker {
+    width: 10px; height: 10px;
+    border-radius: 2px;
+    display: block;
+}
+.shellui-chart-tooltip-label { color: var(--muted-foreground); font-weight: 500; }
+.shellui-chart-tooltip-value {
+    color: var(--foreground);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    padding-left: 12px;
+}
+
+/* Kill default ApexCharts tooltip wrapper — we render our own */
+.apexcharts-tooltip {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+}
+
+/* Crosshair on hover */
+.apexcharts-xcrosshairs,
+.apexcharts-ycrosshairs {
+    stroke: var(--border);
+    stroke-dasharray: 3;
+}
+
+/* Toolbar (opt-in via ShowToolbar) */
+.apexcharts-toolbar { z-index: 10; }
+.apexcharts-toolbar-item {
+    color: var(--muted-foreground);
+    transition: color 150ms;
+}
+.apexcharts-toolbar-item:hover { color: var(--foreground); }
+.apexcharts-menu {
+    background: var(--popover);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    padding: 4px;
+}
+.apexcharts-menu-item {
+    color: var(--foreground);
+    font-size: 13px;
+    padding: 6px 10px;
+    border-radius: calc(var(--radius) - 4px);
+    transition: background-color 150ms;
+}
+.apexcharts-menu-item:hover {
+    background: var(--accent);
+    color: var(--accent-foreground);
+}
+
+/* Data labels */
+.apexcharts-datalabel,
+.apexcharts-datalabel-label,
+.apexcharts-datalabel-value {
+    fill: var(--foreground);
+    font-family: inherit;
+    font-weight: 500;
+}
diff --git a/NET10/BlazorInteractiveServer/wwwroot/input.css b/NET10/BlazorInteractiveServer/wwwroot/input.css
index eaa3b87..7087e41 100644
--- a/NET10/BlazorInteractiveServer/wwwroot/input.css
+++ b/NET10/BlazorInteractiveServer/wwwroot/input.css
@@ -170,6 +170,9 @@
   body {
     @apply bg-background text-foreground;
   }
+  h1:focus {
+    outline: none;
+  }
 }
 @layer base {
   * {
diff --git a/NET10/BlazorInteractiveServer/wwwroot/shellui.js b/NET10/BlazorInteractiveServer/wwwroot/shellui.js
index 73ce727..d646965 100644
--- a/NET10/BlazorInteractiveServer/wwwroot/shellui.js
+++ b/NET10/BlazorInteractiveServer/wwwroot/shellui.js
@@ -1,4 +1,6 @@
-window.ShellUI = {
+window.ShellUI = window.ShellUI || {};
+
+Object.assign(window.ShellUI, {
     focusElement: function (elementId) {
         const element = document.getElementById(elementId);
         if (element) {
@@ -28,29 +30,19 @@ window.ShellUI = {
         }
         
         try {
-            // Create a new DataTransfer object
             const dt = new DataTransfer();
-            
-            // Get files from the drag event's DataTransfer
             let files;
             if (dataTransfer && dataTransfer.files) {
                 files = dataTransfer.files;
             } else {
                 return false;
             }
-            
-            // Add files to the new DataTransfer
             for (let i = 0; i < files.length; i++) {
                 dt.items.add(files[i]);
             }
-            
-            // Assign the files from the DataTransfer to the input
             inputElement.files = dt.files;
-            
-            // Trigger change event
             const event = new Event('change', { bubbles: true });
             inputElement.dispatchEvent(event);
-            
             return true;
         } catch (error) {
             console.error('Error assigning files to input:', error);
@@ -61,56 +53,28 @@ window.ShellUI = {
     setupFileDrop: function (dropZoneId, inputElementId) {
         const dropZone = document.getElementById(dropZoneId);
         const inputElement = document.getElementById(inputElementId);
-        
-        if (!dropZone || !inputElement) {
-            return false;
-        }
-        
-        // Remove existing listener if any
+        if (!dropZone || !inputElement) return false;
         dropZone.removeEventListener('drop', handleDrop);
-        
         function handleDrop(e) {
             e.preventDefault();
             e.stopPropagation();
-            
             const dataTransfer = e.dataTransfer;
-            if (!dataTransfer || !dataTransfer.files || dataTransfer.files.length === 0) {
-                return;
-            }
-            
+            if (!dataTransfer || !dataTransfer.files || dataTransfer.files.length === 0) return;
             try {
-                // Create a new DataTransfer object
                 const dt = new DataTransfer();
-                
-                // Add files from the drag event to the new DataTransfer
                 const files = dataTransfer.files;
-                for (let i = 0; i < files.length; i++) {
-                    dt.items.add(files[i]);
-                }
-                
-                // Assign the files from the DataTransfer to the input
+                for (let i = 0; i < files.length; i++) dt.items.add(files[i]);
                 inputElement.files = dt.files;
-                
-                // Trigger change event
-                const changeEvent = new Event('change', { bubbles: true });
-                inputElement.dispatchEvent(changeEvent);
-            } catch (error) {
-                console.error('Error handling drop files:', error);
-            }
+                inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+            } catch (error) { console.error('Error handling drop files:', error); }
         }
-        
-        // Attach the drop handler
         dropZone.addEventListener('drop', handleDrop);
-        
         return true;
     },
     
     openUrl: function (url, target) {
-        if (window.open) {
-            window.open(url, target || '_blank');
-        } else {
-            console.error('window.open is not available');
-        }
+        if (window.open) window.open(url, target || '_blank');
+        else console.error('window.open is not available');
     },
 
     copyToClipboard: function (text) {
@@ -122,9 +86,8 @@ window.ShellUI = {
     registerShortcut: function (handle, key, ctrl, meta, shift, alt, dotNetRef) {
         const listener = (e) => {
             if (e.key.toLowerCase() !== key.toLowerCase()) return;
-            if (ctrl && !e.ctrlKey) return;
-            if (meta && !e.metaKey) return;
-            if (!ctrl && !meta && (e.ctrlKey || e.metaKey)) return;
+            const hasModifier = (ctrl && e.ctrlKey) || (meta && e.metaKey);
+            if ((ctrl || meta) ? !hasModifier : (e.ctrlKey || e.metaKey)) return;
             if (shift !== e.shiftKey) return;
             if (alt !== e.altKey) return;
             e.preventDefault();
@@ -159,8 +122,6 @@ window.ShellUI = {
         }
     },
 
-    // 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");
@@ -175,6 +136,49 @@ window.ShellUI = {
             window.removeEventListener("resize", listener);
             this._dismissHandlers.delete(handle);
         }
-    }
-};
+    },
+
+    // Sidebar mobile detection + Ctrl/Cmd+B shortcut. Lives here (rather than a
+    // dynamically-imported shellui-sidebar.js) because a relative import resolves
+    // against the page URL, which breaks the moment SidebarProvider is compiled
+    // into a consumer's own Razor Class Library instead of installed straight into
+    // the host app — the file is then served from _content/<Library>/ and the
+    // import 404s silently (caught). shellui.js is already loaded globally via the
+    // host-controlled script tag, so no per-component import is needed.
+    _sidebarHandlers: new Map(),
+    initSidebar: function (handle, dotNetRef) {
+        this.disposeSidebar(handle);
+
+        const media = window.matchMedia("(max-width: 767px)");
+        const notify = (isMobile) => {
+            dotNetRef.invokeMethodAsync("OnMobileChanged", isMobile).catch(() => {});
+        };
+        const handleChange = () => notify(media.matches);
+        const handleKeydown = (e) => {
+            if ((e.key === "b" || e.key === "B") && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                dotNetRef.invokeMethodAsync("OnToggle").catch(() => {});
+            }
+        };
 
+        notify(media.matches);
+        if (media.addEventListener) {
+            media.addEventListener("change", handleChange);
+        } else {
+            media.addListener(handleChange);
+        }
+        document.addEventListener("keydown", handleKeydown);
+        this._sidebarHandlers.set(handle, { media, handleChange, handleKeydown });
+    },
+    disposeSidebar: function (handle) {
+        const h = this._sidebarHandlers.get(handle);
+        if (!h) return;
+        if (h.media.removeEventListener) {
+            h.media.removeEventListener("change", h.handleChange);
+        } else {
+            h.media.removeListener(h.handleChange);
+        }
+        document.removeEventListener("keydown", h.handleKeydown);
+        this._sidebarHandlers.delete(handle);
+    }
+});
\ No newline at end of file

From bae8e9883f2f8f60a988ade17dbcbcbc0d3a7612 Mon Sep 17 00:00:00 2001
From: Shewatipa Tseisi <shewatipa@chips.co.zw>
Date: Sun, 27 Sep 2026 14:31:54 +0200
Subject: [PATCH 4/7] feat: add new UI components and enhance existing
 templates

- Introduced new components: AspectRatio, ButtonGroup, Chat, ChatInput, ChatMessage, ChatTemplate, CommandModels, CommandPalette, Command, DrawerContent, ImageViewer, InputGroup, Kbd, Loading, and NumberInput.
- Updated existing templates to improve functionality and user experience, including enhancements to the DialogContent and DrawerContent templates for better accessibility and focus management.
- Added necessary namespaces and parameters to support new features and improve integration with existing components.
---
 .../Templates/AlertDialogTemplate.cs          |   1 +
 .../Templates/AspectRatioTemplate.cs          |  34 ++
 .../Templates/ButtonGroupTemplate.cs          |  37 ++
 .../Templates/ChatInputTemplate.cs            | 113 ++++++
 .../Templates/ChatMessageTemplate.cs          |  84 +++++
 .../Templates/ChatTemplate.cs                 |  49 +++
 .../Templates/CommandModelsTemplate.cs        |  31 ++
 .../Templates/CommandPaletteTemplate.cs       |  19 +-
 .../Templates/CommandTemplate.cs              | 240 +++++++------
 .../Templates/DialogContentTemplate.cs        |  17 +-
 .../Templates/DrawerContentTemplate.cs        |  17 +-
 .../Templates/ImageViewerTemplate.cs          | 100 ++++++
 .../Templates/InputGroupTemplate.cs           |  57 ++++
 .../Templates/KbdTemplate.cs                  |  29 ++
 .../Templates/LoadingTemplate.cs              | 322 ++++++++++++------
 .../Templates/NumberInputTemplate.cs          |  86 +++++
 .../Templates/QrCodeTemplate.cs               |  95 ++++++
 .../Templates/RadarChartTemplate.cs           |   3 +-
 .../Templates/SheetContentTemplate.cs         |  17 +-
 .../Templates/ShellUIJsTemplate.cs            |   5 +-
 .../Templates/StatCardTemplate.cs             |  62 ++++
 .../Templates/TimelineItemTemplate.cs         |  59 ++++
 .../Templates/TimelineTemplate.cs             |  31 ++
 .../Templates/ToggleGroupItemTemplate.cs      |  57 ++++
 .../Templates/ToggleGroupTemplate.cs          |  64 ++++
 .../Templates/TreeViewItemTemplate.cs         |  88 +++++
 .../Templates/TreeViewTemplate.cs             |  47 +++
 27 files changed, 1559 insertions(+), 205 deletions(-)
 create mode 100644 src/ShellUI.Templates/Templates/AspectRatioTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/ButtonGroupTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/ChatInputTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/ChatMessageTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/ChatTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/CommandModelsTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/ImageViewerTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/InputGroupTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/KbdTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/NumberInputTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/QrCodeTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/StatCardTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/TimelineItemTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/TimelineTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/ToggleGroupItemTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/ToggleGroupTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/TreeViewItemTemplate.cs
 create mode 100644 src/ShellUI.Templates/Templates/TreeViewTemplate.cs

diff --git a/src/ShellUI.Templates/Templates/AlertDialogTemplate.cs b/src/ShellUI.Templates/Templates/AlertDialogTemplate.cs
index 616b10d..e481e46 100644
--- a/src/ShellUI.Templates/Templates/AlertDialogTemplate.cs
+++ b/src/ShellUI.Templates/Templates/AlertDialogTemplate.cs
@@ -16,6 +16,7 @@ public static class AlertDialogTemplate
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
 @using YourProjectNamespace.Components.UI
+@using YourProjectNamespace.Components.UI.Variants
 
 <Dialog Open=""IsOpen"" OpenChanged=""IsOpenChanged"">
     <DialogContent>
diff --git a/src/ShellUI.Templates/Templates/AspectRatioTemplate.cs b/src/ShellUI.Templates/Templates/AspectRatioTemplate.cs
new file mode 100644
index 0000000..0755bd8
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/AspectRatioTemplate.cs
@@ -0,0 +1,34 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class AspectRatioTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "aspect-ratio",
+        DisplayName = "Aspect Ratio",
+        Description = "Container that keeps its content at a fixed aspect ratio",
+        Category = ComponentCategory.Layout,
+        FilePath = "AspectRatio.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "layout", "media", "ratio" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<div class=""@Shell.Cn(""relative w-full overflow-hidden [&>*]:absolute [&>*]:inset-0 [&>*]:h-full [&>*]:w-full"", Class)"" style=""aspect-ratio: @RatioCss"" @attributes=""AdditionalAttributes"">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public double Ratio { get; set; } = 16d / 9d;
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string RatioCss => Ratio.ToString(System.Globalization.CultureInfo.InvariantCulture);
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/ButtonGroupTemplate.cs b/src/ShellUI.Templates/Templates/ButtonGroupTemplate.cs
new file mode 100644
index 0000000..eb6a6de
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ButtonGroupTemplate.cs
@@ -0,0 +1,37 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ButtonGroupTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "button-group",
+        DisplayName = "Button Group",
+        Description = "Joins adjacent buttons into a single horizontal or vertical group",
+        Category = ComponentCategory.Form,
+        FilePath = "ButtonGroup.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "button", "group", "toolbar" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<div role=""group"" class=""@Shell.Cn(""inline-flex"", IsVertical ? VerticalClass : HorizontalClass, Class)"" @attributes=""AdditionalAttributes"">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public string Orientation { get; set; } = ""horizontal"";
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsVertical => string.Equals(Orientation, ""vertical"", StringComparison.OrdinalIgnoreCase);
+
+    private const string HorizontalClass = ""flex-row [&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px [&>*]:focus-visible:z-10"";
+    private const string VerticalClass = ""flex-col [&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px [&>*]:focus-visible:z-10"";
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/ChatInputTemplate.cs b/src/ShellUI.Templates/Templates/ChatInputTemplate.cs
new file mode 100644
index 0000000..873401c
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ChatInputTemplate.cs
@@ -0,0 +1,113 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ChatInputTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "chat-input",
+        DisplayName = "Chat Input",
+        Description = "Prompt input that sends on Enter and adds a newline on Shift+Enter",
+        Category = ComponentCategory.Form,
+        FilePath = "ChatInput.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "chat", "ai", "prompt", "input" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<form @onsubmit=""SubmitAsync""
+      class=""@Shell.Cn(""flex w-full items-end gap-2 rounded-lg border border-input bg-background p-2 ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"", Class)""
+      @attributes=""AdditionalAttributes"">
+    @if (Actions != null)
+    {
+        <div class=""flex shrink-0 items-center gap-1 pb-0.5"">@Actions</div>
+    }
+    <textarea @key=""_inputKey""
+              @ref=""_textarea""
+              rows=""@Rows""
+              value=""@Value""
+              placeholder=""@Placeholder""
+              aria-label=""@Placeholder""
+              disabled=""@Disabled""
+              @oninput=""HandleInputAsync""
+              @onkeydown=""HandleKeyDownAsync""
+              class=""max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2 py-2 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50""></textarea>
+    <button type=""submit"" aria-label=""Send"" disabled=""@(!CanSubmit)""
+            class=""inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"">
+        @if (IsLoading)
+        {
+            <svg class=""h-4 w-4 animate-spin"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"">
+                <circle class=""opacity-25"" cx=""12"" cy=""12"" r=""10"" stroke=""currentColor"" stroke-width=""4""></circle>
+                <path class=""opacity-75"" fill=""currentColor"" d=""M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z""></path>
+            </svg>
+        }
+        else
+        {
+            <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 12h14M12 5l7 7-7 7"" />
+            </svg>
+        }
+    </button>
+</form>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public EventCallback<string> OnSubmit { get; set; }
+    [Parameter] public string Placeholder { get; set; } = ""Send a message..."";
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public bool IsLoading { get; set; }
+    [Parameter] public int Rows { get; set; } = 1;
+    [Parameter] public RenderFragment? Actions { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private ElementReference _textarea;
+    private int _inputKey;
+    private bool _ignoreNextInput;
+    private bool _refocus;
+
+    private bool CanSubmit => !Disabled && !IsLoading && !string.IsNullOrWhiteSpace(Value);
+
+    // Enter sends; the browser's newline still arrives as the next input event, so it is dropped and the textarea re-created.
+    private async Task HandleKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key != ""Enter"" || e.ShiftKey) return;
+        _ignoreNextInput = true;
+        await SubmitAsync();
+    }
+
+    private async Task HandleInputAsync(ChangeEventArgs e)
+    {
+        if (_ignoreNextInput)
+        {
+            _ignoreNextInput = false;
+            _inputKey++;
+            _refocus = true;
+            return;
+        }
+        Value = e.Value?.ToString();
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private async Task SubmitAsync()
+    {
+        if (!CanSubmit) return;
+        var text = Value!.Trim();
+        Value = """";
+        await ValueChanged.InvokeAsync(Value);
+        await OnSubmit.InvokeAsync(text);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_refocus) return;
+        _refocus = false;
+        await _textarea.FocusAsync();
+    }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/ChatMessageTemplate.cs b/src/ShellUI.Templates/Templates/ChatMessageTemplate.cs
new file mode 100644
index 0000000..9aa879d
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ChatMessageTemplate.cs
@@ -0,0 +1,84 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ChatMessageTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "chat-message",
+        DisplayName = "Chat Message",
+        Description = "Chat bubble for user, assistant or system messages with streaming indicator",
+        Category = ComponentCategory.DataDisplay,
+        FilePath = "ChatMessage.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "chat", "ai", "message" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<div class=""@Shell.Cn(""flex w-full gap-3"", IsUser ? ""flex-row-reverse"" : ""flex-row"", Class)"" @attributes=""AdditionalAttributes"">
+    @if (Avatar != null)
+    {
+        <div class=""flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-medium"">@Avatar</div>
+    }
+    <div class=""@Shell.Cn(""flex max-w-[80%] flex-col gap-1"", IsUser ? ""items-end"" : ""items-start"")"">
+        @if (!string.IsNullOrEmpty(Name) || !string.IsNullOrEmpty(Timestamp))
+        {
+            <div class=""flex items-center gap-2 text-xs text-muted-foreground"">
+                @if (!string.IsNullOrEmpty(Name))
+                {
+                    <span class=""font-medium text-foreground"">@Name</span>
+                }
+                @if (!string.IsNullOrEmpty(Timestamp))
+                {
+                    <span>@Timestamp</span>
+                }
+            </div>
+        }
+        <div class=""@Shell.Cn(""break-words rounded-lg px-3 py-2 text-sm leading-relaxed"", BubbleClass)"">
+            @if (Text != null)
+            {
+                <span class=""whitespace-pre-line"">@Text</span>
+            }
+            @ChildContent
+            @if (IsStreaming)
+            {
+                <span class=""ml-1 inline-flex items-center gap-0.5 align-middle"" aria-label=""Typing"">
+                    <span class=""h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.3s]""></span>
+                    <span class=""h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.15s]""></span>
+                    <span class=""h-1.5 w-1.5 animate-bounce rounded-full bg-current""></span>
+                </span>
+            }
+        </div>
+        @if (Actions != null)
+        {
+            <div class=""flex items-center gap-1 text-muted-foreground"">@Actions</div>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Role { get; set; } = ""assistant"";
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public string? Name { get; set; }
+    [Parameter] public string? Timestamp { get; set; }
+    [Parameter] public bool IsStreaming { get; set; }
+    [Parameter] public RenderFragment? Avatar { get; set; }
+    [Parameter] public RenderFragment? Actions { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsUser => string.Equals(Role, ""user"", StringComparison.OrdinalIgnoreCase);
+
+    private string BubbleClass => Role.ToLowerInvariant() switch
+    {
+        ""user"" => ""bg-primary text-primary-foreground"",
+        ""system"" => ""border border-border bg-background italic text-muted-foreground"",
+        _ => ""bg-muted text-foreground""
+    };
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/ChatTemplate.cs b/src/ShellUI.Templates/Templates/ChatTemplate.cs
new file mode 100644
index 0000000..f3a38e3
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ChatTemplate.cs
@@ -0,0 +1,49 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ChatTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "chat",
+        DisplayName = "Chat",
+        Description = "Chat panel with header, auto-scrolling message list and footer",
+        Category = ComponentCategory.DataDisplay,
+        FilePath = "Chat.razor",
+        Dependencies = new List<string> { "chat-message", "chat-input" },
+        Tags = new List<string> { "chat", "ai", "conversation" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<div class=""@Shell.Cn(""flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background"", Class)""
+     style=""@(Height != null ? $""height: {Height}"" : null)""
+     @attributes=""AdditionalAttributes"">
+    @if (Header != null)
+    {
+        <div class=""shrink-0 border-b border-border px-4 py-3"">@Header</div>
+    }
+    @* column-reverse keeps the scroll anchored to the newest message without JS *@
+    <div class=""flex min-h-0 flex-1 flex-col-reverse overflow-y-auto p-4"" role=""log"" aria-live=""polite"">
+        <div class=""flex flex-col gap-4"">
+            @ChildContent
+        </div>
+    </div>
+    @if (Footer != null)
+    {
+        <div class=""shrink-0 border-t border-border p-3"">@Footer</div>
+    }
+</div>
+
+@code {
+    [Parameter] public string? Height { get; set; }
+    [Parameter] public RenderFragment? Header { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public RenderFragment? Footer { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/CommandModelsTemplate.cs b/src/ShellUI.Templates/Templates/CommandModelsTemplate.cs
new file mode 100644
index 0000000..ddc2f36
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/CommandModelsTemplate.cs
@@ -0,0 +1,31 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class CommandModelsTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "command-models",
+        DisplayName = "Command Models",
+        Description = "Models for Command and CommandPalette",
+        Category = ComponentCategory.Overlay,
+        FilePath = "Models/CommandModels.cs",
+        IsAvailable = false,
+        Dependencies = new List<string>()
+    };
+
+    public static string Content => @"namespace YourProjectNamespace.Components.Models;
+
+public class CommandItem
+{
+    public string Title { get; set; } = """";
+    public string? Description { get; set; }
+    public string? Icon { get; set; }
+    public string? Shortcut { get; set; }
+    public string? Group { get; set; }
+    public Func<Task>? Action { get; set; }
+}
+
+";
+}
diff --git a/src/ShellUI.Templates/Templates/CommandPaletteTemplate.cs b/src/ShellUI.Templates/Templates/CommandPaletteTemplate.cs
index 07da5f9..23486a4 100644
--- a/src/ShellUI.Templates/Templates/CommandPaletteTemplate.cs
+++ b/src/ShellUI.Templates/Templates/CommandPaletteTemplate.cs
@@ -16,6 +16,7 @@ public static class CommandPaletteTemplate
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
 @using Microsoft.JSInterop
+@using YourProjectNamespace.Components.Models
 @implements IAsyncDisposable
 @inject IJSRuntime JS
 
@@ -35,10 +36,20 @@ @inject IJSRuntime JS
     [Parameter] public bool UseMeta { get; set; } = true;
     [Parameter] public bool UseShift { get; set; }
     [Parameter] public bool UseAlt { get; set; }
+    [Parameter] public bool IsOpen { get; set; }
+    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
 
     private bool _isOpen;
     private DotNetObjectReference<CommandPalette>? _selfRef;
     private readonly string _handle = Guid.NewGuid().ToString(""N"");
+    private bool _lastIsOpen;
+
+    protected override void OnParametersSet()
+    {
+        if (IsOpen == _lastIsOpen) return;
+        _lastIsOpen = IsOpen;
+        _isOpen = IsOpen;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -52,17 +63,17 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     }
 
     [JSInvokable]
-    public Task OnShortcut()
+    public async Task OnShortcut()
     {
         _isOpen = !_isOpen;
+        await IsOpenChanged.InvokeAsync(_isOpen);
         StateHasChanged();
-        return Task.CompletedTask;
     }
 
-    private Task OnIsOpenChanged(bool open)
+    private async Task OnIsOpenChanged(bool open)
     {
         _isOpen = open;
-        return Task.CompletedTask;
+        await IsOpenChanged.InvokeAsync(open);
     }
 
     private async Task OnCommandSelected(CommandItem item)
diff --git a/src/ShellUI.Templates/Templates/CommandTemplate.cs b/src/ShellUI.Templates/Templates/CommandTemplate.cs
index 8b6cf88..c4b942b 100644
--- a/src/ShellUI.Templates/Templates/CommandTemplate.cs
+++ b/src/ShellUI.Templates/Templates/CommandTemplate.cs
@@ -11,159 +11,207 @@ public static class CommandTemplate
         Description = "Command palette component for quick actions",
         Category = ComponentCategory.Overlay,
         FilePath = "Command.razor",
-        Dependencies = new List<string> { "dialog" }
+        Dependencies = new List<string> { "command-models" }
     };
 
-    public static string Content => @"
-@using Microsoft.JSInterop
+    public static string Content => @"@using YourProjectNamespace.Components.Models
 
 @if (IsOpen)
 {
-    <div class=""fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"" @onclick=""CloseCommand""></div>
-    <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 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"" />
+    <div class=""fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity duration-150 starting:opacity-0"" @onclick=""CloseAsync""></div>
+    <div role=""dialog"" aria-modal=""true"" aria-label=""Command menu""
+         class=""fixed left-1/2 top-[15vh] z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl transition duration-150 ease-out starting:scale-95 starting:opacity-0"">
+        <div class=""flex items-center gap-3 border-b border-border px-4"">
+            <svg class=""h-4 w-4 shrink-0 text-muted-foreground"" 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-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"" />
             </svg>
-            <input
-                @ref=""_searchInput""
-                @bind-value=""_searchQuery""
-                @bind-value:event=""oninput""
-                @onkeydown=""OnKeyDown""
-                type=""text""
-                placeholder=""@Placeholder""
-                class=""flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"" />
+            <input @ref=""_input""
+                   value=""@_query""
+                   @oninput=""OnInput""
+                   @onkeydown=""OnKeyDownAsync""
+                   type=""text""
+                   role=""combobox""
+                   aria-expanded=""true""
+                   aria-controls=""@_listId""
+                   aria-activedescendant=""@(_filtered.Count > 0 ? ItemId(_active) : null)""
+                   autocomplete=""off""
+                   spellcheck=""false""
+                   placeholder=""@Placeholder""
+                   class=""h-12 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"" />
+            <kbd class=""hidden h-5 shrink-0 items-center rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex"">Esc</kbd>
         </div>
 
-        <!-- Results -->
-        <div class=""max-h-[300px] overflow-y-auto p-2"">
-            @if (_filteredCommands.Any())
+        <div id=""@_listId"" role=""listbox"" class=""max-h-[min(360px,55vh)] overflow-y-auto overscroll-contain p-1.5"">
+            @if (_filtered.Count == 0)
             {
-                @foreach (var command in _filteredCommands)
+                <p class=""py-10 text-center text-sm text-muted-foreground"">No results for ""@_query""</p>
+            }
+            else
+            {
+                string? group = null;
+                for (var i = 0; i < _filtered.Count; i++)
                 {
-                    <button
-                        @onclick=""() => SelectCommand(command)""
-                        class=""flex w-full items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none"">
+                    var index = i;
+                    var command = _filtered[i];
+                    if (!string.IsNullOrEmpty(command.Group) && command.Group != group)
+                    {
+                        group = command.Group;
+                        <div class=""px-2.5 pb-1 pt-3 text-xs font-medium text-muted-foreground first:pt-1.5"">@group</div>
+                    }
+                    <div id=""@ItemId(index)""
+                         @ref=""_itemRefs[index]""
+                         role=""option""
+                         tabindex=""-1""
+                         aria-selected=""@(index == _active ? ""true"" : ""false"")""
+                         @onclick=""() => SelectAsync(command)""
+                         @onmousemove=""() => SetActive(index)""
+                         class=""@Shell.Cn(""flex cursor-pointer select-none items-center gap-3 rounded-lg px-2.5 py-2 text-sm outline-none"", index == _active ? ""bg-accent text-accent-foreground"" : ""text-foreground"")"">
                         @if (!string.IsNullOrEmpty(command.Icon))
                         {
-                            <div class=""mr-3 flex h-4 w-4 items-center justify-center"">
-                                @command.Icon
-                            </div>
+                            <span class=""flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4"">@((MarkupString)command.Icon)</span>
                         }
-                        <div class=""flex-1 text-left"">
-                            <div class=""font-medium"">@command.Title</div>
+                        <div class=""min-w-0 flex-1"">
+                            <div class=""truncate font-medium"">@command.Title</div>
                             @if (!string.IsNullOrEmpty(command.Description))
                             {
-                                <div class=""text-xs text-muted-foreground"">@command.Description</div>
+                                <div class=""truncate text-xs text-muted-foreground"">@command.Description</div>
                             }
                         </div>
                         @if (!string.IsNullOrEmpty(command.Shortcut))
                         {
-                            <div class=""ml-3 flex items-center gap-0.5"">
+                            <span class=""ml-auto flex shrink-0 items-center gap-1"">
                                 @foreach (var key in command.Shortcut.Split('+'))
                                 {
-                                    <kbd class=""pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"">
-                                        <span class=""text-xs"">@key</span>
-                                    </kbd>
+                                    <kbd class=""inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-muted px-1 font-mono text-[10px] font-medium text-muted-foreground"">@key</kbd>
                                 }
-                            </div>
+                            </span>
                         }
-                    </button>
+                    </div>
                 }
             }
-            else
-            {
-                <div class=""p-6 text-center text-sm"">
-                    No results found.
-                </div>
-            }
+        </div>
+
+        <div class=""flex items-center gap-4 border-t border-border bg-muted/40 px-4 py-2 text-xs text-muted-foreground"">
+            <span class=""flex items-center gap-1"">
+                <kbd class=""inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]"">&uarr;</kbd>
+                <kbd class=""inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]"">&darr;</kbd>
+                Navigate
+            </span>
+            <span class=""flex items-center gap-1"">
+                <kbd class=""inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-background px-1 font-mono text-[10px]"">&crarr;</kbd>
+                Select
+            </span>
+            <span class=""ml-auto tabular-nums"">@_filtered.Count @(_filtered.Count == 1 ? ""result"" : ""results"")</span>
         </div>
     </div>
 }
 
 @code {
-    [Parameter]
-    public bool IsOpen { get; set; }
+    [Parameter] public bool IsOpen { get; set; }
+    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
+    [Parameter] public List<CommandItem> Commands { get; set; } = new();
+    [Parameter] public EventCallback<CommandItem> CommandSelected { get; set; }
+    [Parameter] public string Placeholder { get; set; } = ""Type a command or search..."";
+
+    private readonly string _listId = $""command-list-{Guid.NewGuid():N}"";
+    private readonly Dictionary<int, ElementReference> _itemRefs = new();
+    private ElementReference _input;
+    private List<CommandItem> _filtered = new();
+    private string _query = """";
+    private int _active;
+    private bool _wasOpen;
+    private bool _focusInput;
+    private bool _scrollToActive;
+
+    private string ItemId(int index) => $""{_listId}-{index}"";
 
-    [Parameter]
-    public string Placeholder { get; set; } = ""Type a command or search..."";
-
-    [Parameter]
-    public List<CommandItem> Commands { get; set; } = new();
+    protected override void OnParametersSet()
+    {
+        if (IsOpen && !_wasOpen)
+        {
+            _query = """";
+            _active = 0;
+            _focusInput = true;
+        }
+        _wasOpen = IsOpen;
+        Filter();
+    }
 
-    [Parameter]
-    public EventCallback<bool> IsOpenChanged { get; set; }
+    private void OnInput(ChangeEventArgs e)
+    {
+        _query = e.Value?.ToString() ?? """";
+        _active = 0;
+        Filter();
+    }
 
-    [Parameter]
-    public EventCallback<CommandItem> CommandSelected { get; set; }
+    private void Filter()
+    {
+        var query = _query.Trim();
+        _filtered = query.Length == 0
+            ? Commands.ToList()
+            : Commands
+                .Where(c => c.Title.Contains(query, StringComparison.OrdinalIgnoreCase)
+                    || c.Description?.Contains(query, StringComparison.OrdinalIgnoreCase) == true
+                    || c.Group?.Contains(query, StringComparison.OrdinalIgnoreCase) == true)
+                .OrderBy(c => c.Title.StartsWith(query, StringComparison.OrdinalIgnoreCase) ? 0 : 1)
+                .ToList();
+        if (_active >= _filtered.Count) _active = Math.Max(0, _filtered.Count - 1);
+    }
 
-    private string _searchQuery = """";
-    private List<CommandItem> _filteredCommands = new();
-    private ElementReference _searchInput;
+    private void SetActive(int index) => _active = index;
 
-    protected override void OnParametersSet()
+    private void Move(int index)
     {
-        UpdateFilteredCommands();
+        if (_filtered.Count == 0) return;
+        _active = (index + _filtered.Count) % _filtered.Count;
+        _scrollToActive = true;
     }
 
-    private void UpdateFilteredCommands()
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
     {
-        if (string.IsNullOrWhiteSpace(_searchQuery))
-        {
-            _filteredCommands = Commands.ToList();
-        }
-        else
+        switch (e.Key)
         {
-            _filteredCommands = Commands
-                .Where(c =>
-                    c.Title.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) ||
-                    (c.Description?.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) == true))
-                .ToList();
+            case ""ArrowDown"": Move(_active + 1); break;
+            case ""ArrowUp"": Move(_active - 1); break;
+            case ""Home"": Move(0); break;
+            case ""End"": Move(_filtered.Count - 1); break;
+            case ""Enter"":
+                if (_filtered.Count > 0) await SelectAsync(_filtered[_active]);
+                break;
+            case ""Escape"": await CloseAsync(); break;
         }
     }
 
-    private async Task SelectCommand(CommandItem command)
+    private async Task SelectAsync(CommandItem command)
     {
+        await CloseAsync();
         await CommandSelected.InvokeAsync(command);
-        await CloseCommand();
     }
 
-    private async Task CloseCommand()
+    private async Task CloseAsync()
     {
         IsOpen = false;
-        _searchQuery = """";
-        await IsOpenChanged.InvokeAsync(IsOpen);
+        _wasOpen = false;
+        await IsOpenChanged.InvokeAsync(false);
     }
 
-    private void OnKeyDown(KeyboardEventArgs e)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (e.Key == ""Escape"")
-        {
-            CloseCommand();
-        }
-        else if (e.Key == ""Enter"" && _filteredCommands.Any())
+        if (!IsOpen) return;
+        if (_focusInput)
         {
-            SelectCommand(_filteredCommands.First());
+            _focusInput = false;
+            await _input.FocusAsync();
         }
-        else if (e.Key == ""ArrowDown"" && _filteredCommands.Count > 1)
+        if (_scrollToActive && _itemRefs.TryGetValue(_active, out var item))
         {
-            // Could implement keyboard navigation here
-        }
-        else if (e.Key == ""ArrowUp"" && _filteredCommands.Count > 1)
-        {
-            // Could implement keyboard navigation here
+            // Focusing the row scrolls it into view without custom JS; focus then returns to the input.
+            _scrollToActive = false;
+            await item.FocusAsync(preventScroll: false);
+            await _input.FocusAsync(preventScroll: true);
         }
     }
 }
-
-public class CommandItem
-{
-    public string Title { get; set; } = """";
-    public string? Description { get; set; }
-    public string? Icon { get; set; }
-    public string? Shortcut { get; set; }
-    public Action? Action { get; set; }
-}";
+";
 }
 
diff --git a/src/ShellUI.Templates/Templates/DialogContentTemplate.cs b/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
index d09a7c5..73522dc 100644
--- a/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
@@ -23,7 +23,7 @@ @inject IJSRuntime JS
 @if (Dialog?.Open == true)
 {
     <div class=""fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"" @onclick=""Close""></div>
-    <div class=""@Shell.Cn(""fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"", Class)"" @attributes=""AdditionalAttributes"">
+    <div @ref=""_content"" tabindex=""-1"" role=""dialog"" aria-modal=""true"" @onkeydown=""OnKeyDownAsync"" class=""@Shell.Cn(""outline-none fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"", Class)"" @attributes=""AdditionalAttributes"">
         @ChildContent
         <button type=""button"" class=""absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"" @onclick=""Close"">
             <svg xmlns=""http://www.w3.org/2000/svg"" width=""24"" height=""24"" viewBox=""0 0 24 24"" fill=""none"" stroke=""currentColor"" stroke-width=""2"" stroke-linecap=""round"" stroke-linejoin=""round"" class=""h-4 w-4""><path d=""M18 6 6 18""/><path d=""m6 6 12 12""/></svg>
@@ -40,6 +40,8 @@ @inject IJSRuntime JS
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
@@ -49,8 +51,21 @@ private async Task Close()
         }
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == ""Escape"") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Dialog?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Dialog?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs b/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
index 256b87d..3df3821 100644
--- a/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
@@ -25,7 +25,7 @@ @inject IJSRuntime JS
 @if (Parent?.Open == true)
 {
     <div class=""fixed inset-0 z-50 bg-black/80 animate-in fade-in-0"" @onclick=""Close""></div>
-    <div class=""@DrawerVariants.Get(Parent.Side, Class)"" @onclick:stopPropagation=""true"" @attributes=""AdditionalAttributes"">
+    <div @ref=""_content"" tabindex=""-1"" role=""dialog"" aria-modal=""true"" @onkeydown=""OnKeyDownAsync"" class=""outline-none @DrawerVariants.Get(Parent.Side, Class)"" @onclick:stopPropagation=""true"" @attributes=""AdditionalAttributes"">
         <div class=""mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted""></div>
         <div class=""flex flex-col gap-4 p-4"">
             @ChildContent
@@ -41,14 +41,29 @@ @inject IJSRuntime JS
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == ""Escape"") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Parent?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Parent?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/src/ShellUI.Templates/Templates/ImageViewerTemplate.cs b/src/ShellUI.Templates/Templates/ImageViewerTemplate.cs
new file mode 100644
index 0000000..37d8ede
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ImageViewerTemplate.cs
@@ -0,0 +1,100 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ImageViewerTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "image-viewer",
+        DisplayName = "Image Viewer",
+        Description = "Image thumbnail that opens a zoomable lightbox",
+        Category = ComponentCategory.Media,
+        FilePath = "ImageViewer.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "image", "lightbox", "media", "zoom" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using System.Globalization
+
+<button type=""button"" @onclick=""Open"" aria-label=""@($""View {Alt}"")""
+        class=""@Shell.Cn(""group relative block overflow-hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"", Class)"">
+    <img src=""@(ThumbnailSrc ?? Src)"" alt=""@Alt"" loading=""lazy""
+         class=""@Shell.Cn(""h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"", ImageClass)""
+         @attributes=""AdditionalAttributes"" />
+</button>
+
+@if (_open)
+{
+    <div @ref=""_overlay"" tabindex=""-1"" role=""dialog"" aria-modal=""true"" aria-label=""@Alt""
+         @onkeydown=""HandleKeyDown"" @onclick=""Close""
+         class=""fixed inset-0 z-50 flex items-center justify-center bg-black/80 outline-none"">
+        <div class=""absolute right-4 top-4 flex gap-2"" @onclick:stopPropagation=""true"">
+            <button type=""button"" aria-label=""Zoom out"" disabled=""@(_scale <= MinScale)"" @onclick=""ZoomOut"" class=""@ControlClass"">
+                <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 12h14"" /></svg>
+            </button>
+            <button type=""button"" aria-label=""Reset zoom"" @onclick=""ResetZoom"" class=""@Shell.Cn(ControlClass, ""w-auto px-2 text-xs tabular-nums"")"">@($""{_scale * 100:0}%"")</button>
+            <button type=""button"" aria-label=""Zoom in"" disabled=""@(_scale >= MaxScale)"" @onclick=""ZoomIn"" class=""@ControlClass"">
+                <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=""M12 5v14M5 12h14"" /></svg>
+            </button>
+            <button type=""button"" aria-label=""Close"" @onclick=""Close"" class=""@ControlClass"">
+                <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=""M6 18L18 6M6 6l12 12"" /></svg>
+            </button>
+        </div>
+        <img src=""@Src"" alt=""@Alt"" @onclick:stopPropagation=""true""
+             style=""transform: scale(@_scale.ToString(CultureInfo.InvariantCulture))""
+             class=""max-h-[90vh] max-w-[90vw] select-none object-contain transition-transform duration-200"" />
+    </div>
+}
+
+@code {
+    [Parameter] public string Src { get; set; } = """";
+    [Parameter] public string? ThumbnailSrc { get; set; }
+    [Parameter] public string Alt { get; set; } = """";
+    [Parameter] public string? ImageClass { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private const double MinScale = 0.5;
+    private const double MaxScale = 4;
+    private const string ControlClass = ""inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/10 text-white transition-colors hover:bg-white/20 disabled:pointer-events-none disabled:opacity-40"";
+
+    private ElementReference _overlay;
+    private bool _open;
+    private bool _focusPending;
+    private double _scale = 1;
+
+    private void Open()
+    {
+        _open = true;
+        _scale = 1;
+        _focusPending = true;
+    }
+
+    private void Close() => _open = false;
+    private void ZoomIn() => _scale = Math.Min(MaxScale, _scale + 0.25);
+    private void ZoomOut() => _scale = Math.Max(MinScale, _scale - 0.25);
+    private void ResetZoom() => _scale = 1;
+
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case ""Escape"": Close(); break;
+            case ""+"": case ""="": ZoomIn(); break;
+            case ""-"": ZoomOut(); break;
+            case ""0"": ResetZoom(); break;
+        }
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_focusPending) return;
+        _focusPending = false;
+        await _overlay.FocusAsync();
+    }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/InputGroupTemplate.cs b/src/ShellUI.Templates/Templates/InputGroupTemplate.cs
new file mode 100644
index 0000000..7eb5d6e
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/InputGroupTemplate.cs
@@ -0,0 +1,57 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class InputGroupTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "input-group",
+        DisplayName = "Input Group",
+        Description = "Input with prefix and suffix slots for icons, units or buttons",
+        Category = ComponentCategory.Form,
+        FilePath = "InputGroup.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "input", "addon", "prefix", "suffix" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<div class=""@Shell.Cn(""flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"", Disabled ? ""cursor-not-allowed opacity-50"" : """", Class)"">
+    @if (Prefix != null)
+    {
+        <span class=""flex shrink-0 items-center pl-3 text-muted-foreground [&>svg]:size-4"">@Prefix</span>
+    }
+    <input type=""@Type""
+           value=""@Value""
+           placeholder=""@Placeholder""
+           disabled=""@Disabled""
+           @oninput=""HandleInput""
+           class=""h-full min-w-0 flex-1 bg-transparent px-3 py-2 placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed""
+           @attributes=""AdditionalAttributes"" />
+    @if (Suffix != null)
+    {
+        <span class=""flex shrink-0 items-center pr-3 text-muted-foreground [&>svg]:size-4"">@Suffix</span>
+    }
+</div>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public string Type { get; set; } = ""text"";
+    [Parameter] public string? Placeholder { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? Prefix { get; set; }
+    [Parameter] public RenderFragment? Suffix { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private async Task HandleInput(ChangeEventArgs e)
+    {
+        Value = e.Value?.ToString();
+        await ValueChanged.InvokeAsync(Value);
+    }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/KbdTemplate.cs b/src/ShellUI.Templates/Templates/KbdTemplate.cs
new file mode 100644
index 0000000..a4a1c92
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/KbdTemplate.cs
@@ -0,0 +1,29 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class KbdTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "kbd",
+        DisplayName = "Kbd",
+        Description = "Keyboard key hint for shortcuts",
+        Category = ComponentCategory.Typography,
+        FilePath = "Kbd.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "kbd", "keyboard", "shortcut" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<kbd class=""@Shell.Cn(""pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium text-muted-foreground"", Class)"" @attributes=""AdditionalAttributes"">@ChildContent</kbd>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/LoadingTemplate.cs b/src/ShellUI.Templates/Templates/LoadingTemplate.cs
index 12aebe5..6b2df3c 100644
--- a/src/ShellUI.Templates/Templates/LoadingTemplate.cs
+++ b/src/ShellUI.Templates/Templates/LoadingTemplate.cs
@@ -14,107 +14,233 @@ public static class LoadingTemplate
         Dependencies = new List<string>()
     };
 
-    public static string Content => @"
-@* 
- * IMPORTANT: For bars, bars-vertical, bars-pulse, and orbit variants to work,
- * add these CSS keyframes to your input.css file:
- *
- * @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); }
- * }
- *@
-@if (Variant == ""spinner"")
-{
-    <div class=""@($""animate-spin rounded-full border-2 border-muted border-t-primary {(Size == ""sm"" ? ""h-4 w-4"" : Size == ""lg"" ? ""h-8 w-8"" : ""h-6 w-6"")} {Class}"")""></div>
-}
-else if (Variant == ""dots"")
-{
-    <div class=""flex space-x-1"">
-        <div class=""@($""animate-bounce rounded-full bg-primary {(Size == ""sm"" ? ""h-2 w-2"" : Size == ""lg"" ? ""h-4 w-4"" : ""h-3 w-3"")} {Class}"")"" style=""animation-delay: 0ms""></div>
-        <div class=""@($""animate-bounce rounded-full bg-primary {(Size == ""sm"" ? ""h-2 w-2"" : Size == ""lg"" ? ""h-4 w-4"" : ""h-3 w-3"")} {Class}"")"" style=""animation-delay: 150ms""></div>
-        <div class=""@($""animate-bounce rounded-full bg-primary {(Size == ""sm"" ? ""h-2 w-2"" : Size == ""lg"" ? ""h-4 w-4"" : ""h-3 w-3"")} {Class}"")"" style=""animation-delay: 300ms""></div>
-    </div>
-}
-else if (Variant == ""pulse"")
-{
-    <div class=""@($""animate-pulse rounded-md bg-muted {(Size == ""sm"" ? ""h-4 w-16"" : Size == ""lg"" ? ""h-6 w-24"" : ""h-5 w-20"")} {Class}"")""></div>
-}
-else if (Variant == ""ring"")
-{
-    <div class=""@($""animate-spin rounded-full border-4 border-muted border-t-primary border-r-primary/50 {(Size == ""sm"" ? ""h-6 w-6"" : Size == ""lg"" ? ""h-12 w-12"" : ""h-8 w-8"")} {Class}"")""></div>
-}
-else if (Variant == ""bars"")
-{
-    <div class=""flex items-end gap-1"">
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-3 w-1"" : Size == ""lg"" ? ""h-6 w-2"" : ""h-4 w-1.5"")} {Class}"")"" style=""animation: bars 1.2s ease-in-out infinite; animation-delay: 0s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-4 w-1"" : Size == ""lg"" ? ""h-8 w-2"" : ""h-6 w-1.5"")} {Class}"")"" style=""animation: bars 1.2s ease-in-out infinite; animation-delay: 0.15s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-5 w-1"" : Size == ""lg"" ? ""h-10 w-2"" : ""h-8 w-1.5"")} {Class}"")"" style=""animation: bars 1.2s ease-in-out infinite; animation-delay: 0.3s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-4 w-1"" : Size == ""lg"" ? ""h-8 w-2"" : ""h-6 w-1.5"")} {Class}"")"" style=""animation: bars 1.2s ease-in-out infinite; animation-delay: 0.45s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-3 w-1"" : Size == ""lg"" ? ""h-6 w-2"" : ""h-4 w-1.5"")} {Class}"")"" style=""animation: bars 1.2s ease-in-out infinite; animation-delay: 0.6s;""></div>
-    </div>
-}
-else if (Variant == ""bars-vertical"")
-{
-    <div class=""flex items-center gap-1"">
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-3 w-1"" : Size == ""lg"" ? ""h-6 w-2"" : ""h-4 w-1.5"")} {Class}"")"" style=""animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-4 w-1"" : Size == ""lg"" ? ""h-8 w-2"" : ""h-6 w-1.5"")} {Class}"")"" style=""animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.15s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-5 w-1"" : Size == ""lg"" ? ""h-10 w-2"" : ""h-8 w-1.5"")} {Class}"")"" style=""animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.3s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-4 w-1"" : Size == ""lg"" ? ""h-8 w-2"" : ""h-6 w-1.5"")} {Class}"")"" style=""animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.45s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-3 w-1"" : Size == ""lg"" ? ""h-6 w-2"" : ""h-4 w-1.5"")} {Class}"")"" style=""animation: bars-vertical 1.2s ease-in-out infinite; animation-delay: 0.6s;""></div>
-    </div>
-}
-else if (Variant == ""bars-pulse"")
-{
-    <div class=""flex items-center gap-1"">
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-3 w-1"" : Size == ""lg"" ? ""h-6 w-2"" : ""h-4 w-1.5"")} {Class}"")"" style=""animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-4 w-1"" : Size == ""lg"" ? ""h-8 w-2"" : ""h-6 w-1.5"")} {Class}"")"" style=""animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.15s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-5 w-1"" : Size == ""lg"" ? ""h-10 w-2"" : ""h-8 w-1.5"")} {Class}"")"" style=""animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.3s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-4 w-1"" : Size == ""lg"" ? ""h-8 w-2"" : ""h-6 w-1.5"")} {Class}"")"" style=""animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.45s;""></div>
-        <div class=""@($""bg-primary rounded-sm {(Size == ""sm"" ? ""h-3 w-1"" : Size == ""lg"" ? ""h-6 w-2"" : ""h-4 w-1.5"")} {Class}"")"" style=""animation: bars-pulse 1.2s ease-in-out infinite; animation-delay: 0.6s;""></div>
-    </div>
-}
-else if (Variant == ""grid"")
-{
-    <div class=""@($""grid grid-cols-3 gap-1 {(Size == ""sm"" ? ""w-4 h-4"" : Size == ""lg"" ? ""w-8 h-8"" : ""w-6 h-6"")} {Class}"")"">
-        @for (int i = 0; i < 9; i++)
-        {
-            <div class=""bg-primary rounded-sm animate-pulse"" style=""animation-delay: @(i * 0.1)s; animation-duration: 1.2s;""></div>
-        }
-    </div>
-}
-else if (Variant == ""orbit"")
-{
-    <div class=""@($""relative {(Size == ""sm"" ? ""h-6 w-6"" : Size == ""lg"" ? ""h-12 w-12"" : ""h-8 w-8"")} {Class}"")"">
-        <div class=""absolute inset-0 rounded-full border-2 border-primary/20""></div>
-        <div class=""@($""absolute top-0 left-1/2 -translate-x-1/2 rounded-full bg-primary animate-spin {(Size == ""sm"" ? ""h-1.5 w-1.5"" : Size == ""lg"" ? ""h-3 w-3"" : ""h-2 w-2"")}"")"" style=""transform-origin: center calc(50% + @(Size == ""sm"" ? ""0.75rem"" : Size == ""lg"" ? ""1.5rem"" : ""1rem""));""></div>
-    </div>
-}
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using System.Globalization
+
+<span role=""status"" aria-label=""@Label""
+      class=""@Shell.Cn(""shellui-loading inline-flex shrink-0 items-center justify-center"", Variant is ""shimmer"" or ""logo"" ? ""text-foreground"" : ""text-primary"", Variant == ""progress"" ? ""w-full"" : """", Class)""
+      @attributes=""AdditionalAttributes"">
+    @switch (Variant)
+    {
+        case ""dots"":
+        case ""typing"":
+        case ""wave"":
+            <span class=""flex items-center"" style=""height:@Px(S);gap:@Px(U * 0.5)"">
+                @for (var i = 0; i < (Variant == ""wave"" ? 5 : 3); i++)
+                {
+                    <span class=""block rounded-full bg-current"" style=""width:@Px(U);height:@Px(U);animation:@DotAnimation(i)""></span>
+                }
+            </span>
+            break;
+
+        case ""pulse"":
+            <span class=""block rounded-md bg-muted"" style=""width:@Px(S * 3.5);height:@Px(S * 0.75);animation:shellui-loading-fade 1.6s ease-in-out infinite""></span>
+            break;
+
+        case ""ring"":
+            <svg viewBox=""0 0 50 50"" style=""width:@Px(S);height:@Px(S);animation:shellui-loading-spin 1.4s linear infinite"">
+                <circle cx=""25"" cy=""25"" r=""20"" fill=""none"" stroke=""currentColor"" stroke-opacity=""0.15"" stroke-width=""5"" />
+                <circle cx=""25"" cy=""25"" r=""20"" fill=""none"" stroke=""currentColor"" stroke-width=""5"" stroke-linecap=""round"" style=""animation:shellui-loading-arc 1.4s ease-in-out infinite"" />
+            </svg>
+            break;
+
+        case ""bars"":
+        case ""bars-vertical"":
+        case ""bars-pulse"":
+            <span class=""flex items-center"" style=""height:@Px(S);gap:@Px(S / 10)"">
+                @for (var i = 0; i < 5; i++)
+                {
+                    <span class=""block h-full rounded-full bg-current"" style=""width:@Px(S / 8);@BarStyle(i)""></span>
+                }
+            </span>
+            break;
+
+        case ""grid"":
+        case ""snake"":
+        case ""rows"":
+        case ""columns"":
+        case ""sequence"":
+        case ""twinkle"":
+            <span class=""grid grid-cols-3"" style=""width:@Px(S);height:@Px(S);gap:@Px(S / 12)"">
+                @for (var i = 0; i < 9; i++)
+                {
+                    <span class=""block rounded-[2px] bg-current"" style=""@CellStyle(i)""></span>
+                }
+            </span>
+            break;
+
+        case ""logo"":
+            <span class=""grid grid-cols-5"" style=""width:@Px(S * 1.25);height:@Px(S * 1.25);gap:@Px(S / 16)"">
+                @for (var i = 0; i < 25; i++)
+                {
+                    <span class=""block rounded-full bg-current"" style=""@LogoCellStyle(i)""></span>
+                }
+            </span>
+            break;
+
+        case ""orbit"":
+            <svg viewBox=""0 0 24 24"" style=""width:@Px(S);height:@Px(S);animation:shellui-loading-spin 1s linear infinite"">
+                <circle cx=""12"" cy=""12"" r=""9"" fill=""none"" stroke=""currentColor"" stroke-opacity=""0.15"" stroke-width=""2"" />
+                <circle cx=""12"" cy=""12"" r=""9"" fill=""none"" stroke=""currentColor"" stroke-opacity=""0.45"" stroke-width=""2"" stroke-linecap=""round"" stroke-dasharray=""14 42.55"" stroke-dashoffset=""-28.3"" />
+                <circle cx=""12"" cy=""3"" r=""2.5"" fill=""currentColor"" />
+            </svg>
+            break;
+
+        case ""activity"":
+            <span class=""relative block"" style=""width:@Px(S);height:@Px(S)"">
+                @for (var i = 0; i < 12; i++)
+                {
+                    <span class=""absolute left-1/2 top-0 block rounded-full bg-current""
+                          style=""width:@Px(Math.Max(1.5, S * 0.08));height:@Px(S * 0.28);margin-left:@Px(-Math.Max(1.5, S * 0.08) / 2);transform:rotate(@(i * 30)deg);transform-origin:50% @Px(S / 2);animation:shellui-loading-spoke 1s linear @Sec(i / 12.0 - 1) infinite""></span>
+                }
+            </span>
+            break;
+
+        case ""chase"":
+            <span class=""relative block"" style=""width:@Px(S);height:@Px(S)"">
+                @for (var i = 0; i < 8; i++)
+                {
+                    <span class=""absolute inset-0 block"" style=""transform:rotate(@(i * 45)deg)"">
+                        <span class=""absolute left-1/2 top-0 block rounded-full bg-current""
+                              style=""width:@Px(S * 0.2);height:@Px(S * 0.2);margin-left:@Px(-S * 0.1);animation:shellui-loading-chase 1s ease-in-out @Sec(i / 8.0 - 1) infinite""></span>
+                    </span>
+                }
+            </span>
+            break;
+
+        case ""dual-ring"":
+            <span class=""relative block"" style=""width:@Px(S);height:@Px(S)"">
+                <svg viewBox=""0 0 50 50"" class=""absolute inset-0"" style=""width:100%;height:100%;animation:shellui-loading-spin 1.2s linear infinite"">
+                    <circle cx=""25"" cy=""25"" r=""21"" fill=""none"" stroke=""currentColor"" stroke-width=""4"" stroke-linecap=""round"" stroke-dasharray=""66 132"" />
+                </svg>
+                <svg viewBox=""0 0 50 50"" class=""absolute"" style=""inset:25%;width:50%;height:50%;animation:shellui-loading-spin 0.9s linear infinite reverse"">
+                    <circle cx=""25"" cy=""25"" r=""19"" fill=""none"" stroke=""currentColor"" stroke-opacity=""0.6"" stroke-width=""7"" stroke-linecap=""round"" stroke-dasharray=""60 120"" />
+                </svg>
+            </span>
+            break;
+
+        case ""ripple"":
+            <span class=""relative block"" style=""width:@Px(S);height:@Px(S)"">
+                <span class=""absolute inset-0 rounded-full"" style=""border:@Px(Border) solid currentColor;animation:shellui-loading-ripple 1.4s cubic-bezier(0,0.2,0.8,1) infinite""></span>
+                <span class=""absolute inset-0 rounded-full"" style=""border:@Px(Border) solid currentColor;animation:shellui-loading-ripple 1.4s cubic-bezier(0,0.2,0.8,1) -0.7s infinite""></span>
+            </span>
+            break;
+
+        case ""progress"":
+            <span class=""relative block w-full overflow-hidden rounded-full"" style=""height:@Px(Size == ""sm"" ? 2 : Size == ""lg"" ? 6 : 4);background:color-mix(in oklab, currentColor 15%, transparent)"">
+                <span class=""absolute inset-y-0 left-0 block w-2/5 rounded-full bg-current"" style=""animation:shellui-loading-progress 1.4s cubic-bezier(0.65,0.05,0.36,1) infinite""></span>
+            </span>
+            break;
+
+        case ""shimmer"":
+            <span class=""@Shell.Cn(""font-medium"", Size == ""sm"" ? ""text-xs"" : Size == ""lg"" ? ""text-base"" : ""text-sm"")""
+                  style=""background-image:linear-gradient(90deg, color-mix(in oklab, currentColor 35%, transparent) 25%, currentColor 50%, color-mix(in oklab, currentColor 35%, transparent) 75%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shellui-loading-shimmer 2s linear infinite"">@(Text ?? ""Loading..."")</span>
+            break;
+
+        default:
+            <span class=""block rounded-full"" style=""width:@Px(S);height:@Px(S);border:@Px(Border) solid color-mix(in oklab, currentColor 20%, transparent);border-top-color:currentColor;animation:shellui-loading-spin 0.75s linear infinite""></span>
+            break;
+    }
+</span>
+
+<style>
+    @@keyframes shellui-loading-spin { to { transform: rotate(360deg); } }
+    @@keyframes shellui-loading-arc { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
+    @@keyframes shellui-loading-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-80%); opacity: 1; } }
+    @@keyframes shellui-loading-typing { 0%, 60%, 100% { transform: scale(.75); opacity: .25; } 30% { transform: scale(1); opacity: 1; } }
+    @@keyframes shellui-loading-wave { 0%, 100% { transform: translateY(70%); } 50% { transform: translateY(-70%); } }
+    @@keyframes shellui-loading-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+    @@keyframes shellui-loading-bars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
+    @@keyframes shellui-loading-bars-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
+    @@keyframes shellui-loading-grid { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 35% { transform: scale(.35); opacity: .35; } }
+    @@keyframes shellui-loading-trail { 0% { opacity: 1; } 75%, 100% { opacity: .12; } }
+    @@keyframes shellui-loading-logo-on { 0%, 35%, 100% { opacity: 1; } 50%, 85% { opacity: .1; } }
+    @@keyframes shellui-loading-logo-off { 0%, 35%, 100% { opacity: .1; } 50%, 85% { opacity: 1; } }
+    @@keyframes shellui-loading-spoke { 0% { opacity: 1; } 100% { opacity: .15; } }
+    @@keyframes shellui-loading-chase { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.35); opacity: .2; } }
+    @@keyframes shellui-loading-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
+    @@keyframes shellui-loading-ripple { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
+    @@keyframes shellui-loading-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
+    @@keyframes shellui-loading-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+    @@media (prefers-reduced-motion: reduce) { .shellui-loading * { animation-duration: 2.5s !important; } }
+</style>
 
 @code {
-    [Parameter]
-    public string Variant { get; set; } = ""spinner"";
+    [Parameter] public string Variant { get; set; } = ""spinner"";
+    [Parameter] public string Size { get; set; } = ""default"";
+    [Parameter] public string Label { get; set; } = ""Loading"";
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    // Clockwise path around the 3x3 grid; the centre cell stays dim.
+    private static readonly int[] SnakePath = { 0, 1, 2, 5, 8, 7, 6, 3 };
+    private static readonly double[] TwinkleDelays = { 0.2, 0.9, 0.5, 1.2, 0.1, 0.7, 1.4, 0.3, 1.0 };
+
+    // The ShellUI mark: a prompt chevron beside a cursor bar.
+    private static readonly bool[] LogoPattern =
+    {
+        true,  false, false, false, true,
+        false, true,  false, false, true,
+        false, false, true,  false, true,
+        false, true,  false, false, true,
+        true,  false, false, false, true,
+    };
+
+    private double S => Size switch { ""sm"" => 16, ""lg"" => 40, _ => 24 };
+    private double U => S / 4;
+    private double Border => Math.Max(2, Math.Round(S / 10));
 
-    [Parameter]
-    public string Size { get; set; } = ""default"";
+    private static string Px(double value) => value.ToString(""0.##"", CultureInfo.InvariantCulture) + ""px"";
+    private static string Sec(double value) => value.ToString(""0.###"", CultureInfo.InvariantCulture) + ""s"";
 
-    [Parameter]
-    public string Class { get; set; } = """";
-}";
+    private string DotAnimation(int i) => Variant switch
+    {
+        ""typing"" => $""shellui-loading-typing 1.4s ease-in-out {Sec(i * 0.2)} infinite"",
+        ""wave"" => $""shellui-loading-wave 1s ease-in-out {Sec(i * 0.1 - 1)} infinite"",
+        _ => $""shellui-loading-bounce 1.2s ease-in-out {Sec(i * 0.16)} infinite""
+    };
+
+    private string BarStyle(int i) => Variant switch
+    {
+        ""bars-pulse"" => $""animation:shellui-loading-bars-fade 1s ease-in-out {Sec(i * 0.12)} infinite"",
+        ""bars-vertical"" => $""transform-origin:center;animation:shellui-loading-bars 1s ease-in-out {Sec(i * 0.12)} infinite"",
+        _ => $""transform-origin:bottom;animation:shellui-loading-bars 1s ease-in-out {Sec(i * 0.12)} infinite""
+    };
+
+    private string CellStyle(int i)
+    {
+        int row = i / 3, column = i % 3;
+        switch (Variant)
+        {
+            case ""grid"":
+                return $""animation:shellui-loading-grid 1.3s ease-in-out {Sec((row + column) * 0.1)} infinite"";
+            case ""rows"":
+                return Trail(row, 3, 1.2);
+            case ""columns"":
+                return Trail(column, 3, 1.2);
+            case ""sequence"":
+                return Trail(i, 9, 1.35);
+            case ""twinkle"":
+                return $""animation:shellui-loading-twinkle 1.6s ease-in-out {Sec(TwinkleDelays[i] - 1.6)} infinite"";
+            default:
+                var step = Array.IndexOf(SnakePath, i);
+                return step < 0 ? ""opacity:.12"" : Trail(step, 8, 1);
+        }
+    }
+
+    private static string LogoCellStyle(int i)
+    {
+        var on = LogoPattern[i];
+        var delay = ((i / 5) + (i % 5)) * 0.05;
+        return $""opacity:{(on ? ""1"" : "".1"")};animation:shellui-loading-logo-{(on ? ""on"" : ""off"")} 2.4s ease-in-out {Sec(delay)} infinite"";
+    }
+
+    // Each step lights up in turn and fades while the next one brightens.
+    private static string Trail(int step, int steps, double duration) =>
+        $""animation:shellui-loading-trail {Sec(duration)} linear {Sec(step * duration / steps - duration)} infinite"";
+}
+";
 }
 
diff --git a/src/ShellUI.Templates/Templates/NumberInputTemplate.cs b/src/ShellUI.Templates/Templates/NumberInputTemplate.cs
new file mode 100644
index 0000000..fd647f3
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/NumberInputTemplate.cs
@@ -0,0 +1,86 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class NumberInputTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "number-input",
+        DisplayName = "Number Input",
+        Description = "Numeric input with increment and decrement buttons",
+        Category = ComponentCategory.Form,
+        FilePath = "NumberInput.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "input", "number", "stepper" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using System.Globalization
+
+<div class=""@Shell.Cn(""flex h-10 w-full items-center overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"", Disabled ? ""opacity-50"" : """", Class)"">
+    <button type=""button"" aria-label=""Decrease"" disabled=""@(Disabled || AtMin)"" @onclick=""DecrementAsync""
+            class=""flex h-full w-10 shrink-0 items-center justify-center border-r border-input text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"">
+        <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 12h14"" />
+        </svg>
+    </button>
+    <input type=""number""
+           inputmode=""decimal""
+           value=""@Format(Value)""
+           min=""@Format(Min)""
+           max=""@Format(Max)""
+           step=""@Format(Step)""
+           disabled=""@Disabled""
+           @onchange=""HandleChangeAsync""
+           class=""h-full min-w-0 flex-1 bg-transparent px-2 text-center tabular-nums focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none""
+           @attributes=""AdditionalAttributes"" />
+    <button type=""button"" aria-label=""Increase"" disabled=""@(Disabled || AtMax)"" @onclick=""IncrementAsync""
+            class=""flex h-full w-10 shrink-0 items-center justify-center border-l border-input text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"">
+        <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=""M12 5v14M5 12h14"" />
+        </svg>
+    </button>
+</div>
+
+@code {
+    [Parameter] public decimal? Value { get; set; }
+    [Parameter] public EventCallback<decimal?> ValueChanged { get; set; }
+    [Parameter] public decimal? Min { get; set; }
+    [Parameter] public decimal? Max { get; set; }
+    [Parameter] public decimal Step { get; set; } = 1;
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool AtMin => Min.HasValue && Value.HasValue && Value <= Min;
+    private bool AtMax => Max.HasValue && Value.HasValue && Value >= Max;
+
+    private static string? Format(decimal? value) => value?.ToString(CultureInfo.InvariantCulture);
+
+    private Task DecrementAsync() => SetAsync((Value ?? Min ?? 0) - Step);
+    private Task IncrementAsync() => SetAsync((Value ?? Min ?? 0) + Step);
+
+    private Task HandleChangeAsync(ChangeEventArgs e)
+    {
+        var text = e.Value?.ToString();
+        if (string.IsNullOrWhiteSpace(text)) return SetAsync(null);
+        return decimal.TryParse(text, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed)
+            ? SetAsync(parsed)
+            : SetAsync(Value);
+    }
+
+    private async Task SetAsync(decimal? value)
+    {
+        if (value.HasValue)
+        {
+            if (Min.HasValue && value < Min) value = Min;
+            if (Max.HasValue && value > Max) value = Max;
+        }
+        Value = value;
+        await ValueChanged.InvokeAsync(value);
+    }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/QrCodeTemplate.cs b/src/ShellUI.Templates/Templates/QrCodeTemplate.cs
new file mode 100644
index 0000000..66bbe62
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/QrCodeTemplate.cs
@@ -0,0 +1,95 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class QrCodeTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "qr-code",
+        DisplayName = "QR Code",
+        Description = "QR code rendered as SVG",
+        Category = ComponentCategory.DataDisplay,
+        FilePath = "QrCode.razor",
+        Dependencies = new List<string>(),
+        NuGetDependencies = new List<NuGetDependency>
+        {
+            new() { PackageId = "QRCoder", Version = "1.8.0" }
+        },
+        Tags = new List<string> { "qr", "code", "share" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using System.Text
+@using QRCoder
+
+@if (_moduleCount > 0)
+{
+    <svg xmlns=""http://www.w3.org/2000/svg""
+         viewBox=""0 0 @_moduleCount @_moduleCount""
+         width=""@Size""
+         height=""@Size""
+         shape-rendering=""crispEdges""
+         role=""img""
+         aria-label=""@(Label ?? Value)""
+         class=""@Shell.Cn(""rounded-md"", Class)""
+         @attributes=""AdditionalAttributes"">
+        <rect width=""100%"" height=""100%"" fill=""@Background"" />
+        <path d=""@_path"" fill=""@Foreground"" />
+    </svg>
+}
+
+@code {
+    [Parameter] public string Value { get; set; } = """";
+    [Parameter] public int Size { get; set; } = 160;
+    [Parameter] public string ErrorCorrection { get; set; } = ""M"";
+    [Parameter] public string Foreground { get; set; } = ""#000000"";
+    [Parameter] public string Background { get; set; } = ""#ffffff"";
+    [Parameter] public string? Label { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string _path = """";
+    private int _moduleCount;
+    private string? _renderedKey;
+
+    protected override void OnParametersSet()
+    {
+        var key = ErrorCorrection + ""|"" + Value;
+        if (key == _renderedKey) return;
+        _renderedKey = key;
+
+        if (string.IsNullOrEmpty(Value))
+        {
+            _moduleCount = 0;
+            _path = """";
+            return;
+        }
+
+        var level = ErrorCorrection.ToUpperInvariant() switch
+        {
+            ""L"" => QRCodeGenerator.ECCLevel.L,
+            ""Q"" => QRCodeGenerator.ECCLevel.Q,
+            ""H"" => QRCodeGenerator.ECCLevel.H,
+            _ => QRCodeGenerator.ECCLevel.M
+        };
+
+        using var generator = new QRCodeGenerator();
+        using var data = generator.CreateQrCode(Value, level);
+        var matrix = data.ModuleMatrix;
+        _moduleCount = matrix.Count;
+
+        var path = new StringBuilder();
+        for (var y = 0; y < matrix.Count; y++)
+        {
+            for (var x = 0; x < matrix[y].Count; x++)
+            {
+                if (matrix[y][x]) path.Append('M').Append(x).Append(',').Append(y).Append(""h1v1h-1z"");
+            }
+        }
+        _path = path.ToString();
+    }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/RadarChartTemplate.cs b/src/ShellUI.Templates/Templates/RadarChartTemplate.cs
index e74b224..b23df2a 100644
--- a/src/ShellUI.Templates/Templates/RadarChartTemplate.cs
+++ b/src/ShellUI.Templates/Templates/RadarChartTemplate.cs
@@ -44,11 +44,12 @@ @inherits Chart<TItem>
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
-        // Radar tooltips only trigger per point, not in shared mode.
+        // Radar tooltips only trigger per point, and without FollowCursor they are pinned to the top of the chart.
         if (ChartOptions.Tooltip != null)
         {
             ChartOptions.Tooltip.Shared = false;
             ChartOptions.Tooltip.Intersect = true;
+            ChartOptions.Tooltip.FollowCursor = true;
         }
     }
 }
diff --git a/src/ShellUI.Templates/Templates/SheetContentTemplate.cs b/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
index 0c4c7f8..7821cf7 100644
--- a/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
@@ -25,7 +25,7 @@ @inject IJSRuntime JS
 @if (Parent?.Open == true)
 {
     <div class=""fixed inset-0 z-50 bg-background/80 backdrop-blur-sm animate-in fade-in-0"" @onclick=""Close""></div>
-    <div class=""@SheetVariants.Get(Parent.Side, Class)"" @onclick:stopPropagation=""true"" @attributes=""AdditionalAttributes"">
+    <div @ref=""_content"" tabindex=""-1"" role=""dialog"" aria-modal=""true"" @onkeydown=""OnKeyDownAsync"" class=""outline-none @SheetVariants.Get(Parent.Side, Class)"" @onclick:stopPropagation=""true"" @attributes=""AdditionalAttributes"">
         <div class=""flex flex-col gap-4 p-6"">
             @ChildContent
         </div>
@@ -40,14 +40,29 @@ @inject IJSRuntime JS
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     private bool _isLocked;
+    private bool _focused;
+    private ElementReference _content;
 
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == ""Escape"") await Close();
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var isOpen = Parent?.Open == true;
+        if (isOpen && !_focused)
+        {
+            _focused = true;
+            try { await _content.FocusAsync(); } catch (InvalidOperationException) { }
+        }
+        else if (!isOpen) _focused = false;
+
         var shouldBeLocked = Parent?.Open == true;
         if (shouldBeLocked && !_isLocked)
         {
diff --git a/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs b/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
index b60542b..1329525 100644
--- a/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
+++ b/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
@@ -103,9 +103,8 @@ function handleDrop(e) {
     registerShortcut: function (handle, key, ctrl, meta, shift, alt, dotNetRef) {
         const listener = (e) => {
             if (e.key.toLowerCase() !== key.toLowerCase()) return;
-            if (ctrl && !e.ctrlKey) return;
-            if (meta && !e.metaKey) return;
-            if (!ctrl && !meta && (e.ctrlKey || e.metaKey)) return;
+            const hasModifier = (ctrl && e.ctrlKey) || (meta && e.metaKey);
+            if ((ctrl || meta) ? !hasModifier : (e.ctrlKey || e.metaKey)) return;
             if (shift !== e.shiftKey) return;
             if (alt !== e.altKey) return;
             e.preventDefault();
diff --git a/src/ShellUI.Templates/Templates/StatCardTemplate.cs b/src/ShellUI.Templates/Templates/StatCardTemplate.cs
new file mode 100644
index 0000000..5d02c74
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/StatCardTemplate.cs
@@ -0,0 +1,62 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class StatCardTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "stat-card",
+        DisplayName = "Stat Card",
+        Description = "KPI tile with value, change indicator and description",
+        Category = ComponentCategory.DataDisplay,
+        FilePath = "StatCard.razor",
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "stat", "kpi", "metric", "dashboard" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<div class=""@Shell.Cn(""rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm"", Class)"" @attributes=""AdditionalAttributes"">
+    <div class=""flex items-center justify-between gap-2"">
+        <p class=""text-sm font-medium text-muted-foreground"">@Title</p>
+        @if (Icon != null)
+        {
+            <span class=""flex text-muted-foreground [&>svg]:size-4"">@Icon</span>
+        }
+    </div>
+    <div class=""mt-2 flex flex-wrap items-baseline gap-2"">
+        <p class=""text-2xl font-bold tracking-tight tabular-nums"">@Value</p>
+        @if (!string.IsNullOrEmpty(Change))
+        {
+            <span class=""@Shell.Cn(""inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium"", ChangeClass)"">@Change</span>
+        }
+    </div>
+    @if (!string.IsNullOrEmpty(Description))
+    {
+        <p class=""mt-1 text-xs text-muted-foreground"">@Description</p>
+    }
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public string? Change { get; set; }
+    [Parameter] public string Trend { get; set; } = ""neutral"";
+    [Parameter] public string? Description { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ChangeClass => Trend.ToLowerInvariant() switch
+    {
+        ""up"" => ""bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"",
+        ""down"" => ""bg-red-500/10 text-red-600 dark:text-red-400"",
+        _ => ""bg-muted text-muted-foreground""
+    };
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/TimelineItemTemplate.cs b/src/ShellUI.Templates/Templates/TimelineItemTemplate.cs
new file mode 100644
index 0000000..dd0ada8
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/TimelineItemTemplate.cs
@@ -0,0 +1,59 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class TimelineItemTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "timeline-item",
+        DisplayName = "Timeline Item",
+        Description = "Event for Timeline",
+        Category = ComponentCategory.DataDisplay,
+        FilePath = "TimelineItem.razor",
+        IsAvailable = false,
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "timeline" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<li class=""@Shell.Cn(""group relative flex gap-3 pb-8 last:pb-0"", Class)"" @attributes=""AdditionalAttributes"">
+    <span aria-hidden=""true"" class=""absolute bottom-0 left-3.5 top-0 w-px -translate-x-1/2 bg-border group-first:top-3.5 group-last:bottom-auto group-last:h-3.5 group-only:hidden""></span>
+    <div class=""relative z-10 flex h-7 w-7 shrink-0 items-center justify-center"">
+        @if (Icon != null)
+        {
+            <span class=""@Shell.Cn(""flex h-7 w-7 items-center justify-center rounded-full border bg-background [&>svg]:size-3.5"", Active ? ""border-primary text-primary"" : ""border-border text-muted-foreground"")"">@Icon</span>
+        }
+        else
+        {
+            <span class=""@Shell.Cn(""h-2.5 w-2.5 rounded-full"", Active ? ""bg-primary ring-4 ring-primary/20"" : ""bg-muted-foreground"")""></span>
+        }
+    </div>
+    <div class=""min-w-0 flex-1"">
+        <div class=""flex min-h-7 flex-wrap items-center gap-x-2"">
+            <h3 class=""text-sm font-semibold text-foreground"">@Title</h3>
+            @if (!string.IsNullOrEmpty(Time))
+            {
+                <time class=""text-xs text-muted-foreground"">@Time</time>
+            }
+        </div>
+        @if (ChildContent != null)
+        {
+            <div class=""text-sm text-muted-foreground"">@ChildContent</div>
+        }
+    </div>
+</li>
+
+@code {
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Time { get; set; }
+    [Parameter] public bool Active { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/TimelineTemplate.cs b/src/ShellUI.Templates/Templates/TimelineTemplate.cs
new file mode 100644
index 0000000..305cf78
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/TimelineTemplate.cs
@@ -0,0 +1,31 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class TimelineTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "timeline",
+        DisplayName = "Timeline",
+        Description = "Vertical timeline of events",
+        Category = ComponentCategory.DataDisplay,
+        FilePath = "Timeline.razor",
+        Dependencies = new List<string> { "timeline-item" },
+        Tags = new List<string> { "timeline", "history", "activity" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<ol class=""@Shell.Cn(""relative"", Class)"" @attributes=""AdditionalAttributes"">
+    @ChildContent
+</ol>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/ToggleGroupItemTemplate.cs b/src/ShellUI.Templates/Templates/ToggleGroupItemTemplate.cs
new file mode 100644
index 0000000..cf4e263
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ToggleGroupItemTemplate.cs
@@ -0,0 +1,57 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ToggleGroupItemTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "toggle-group-item",
+        DisplayName = "Toggle Group Item",
+        Description = "Item for ToggleGroup",
+        Category = ComponentCategory.Form,
+        FilePath = "ToggleGroupItem.razor",
+        IsAvailable = false,
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "toggle", "group" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@implements IDisposable
+
+<button type=""button""
+        role=""@(Group?.Multiple == true ? ""checkbox"" : ""radio"")""
+        aria-checked=""@(IsPressed ? ""true"" : ""false"")""
+        data-state=""@(IsPressed ? ""on"" : ""off"")""
+        disabled=""@IsDisabled""
+        @onclick=""ToggleAsync""
+        class=""@Shell.Cn(""inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-md px-2.5 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4"", IsPressed ? ""bg-accent text-accent-foreground"" : ""bg-transparent"", Class)""
+        @attributes=""AdditionalAttributes"">
+    @ChildContent
+</button>
+
+@code {
+    [CascadingParameter] public ToggleGroup? Group { get; set; }
+    [Parameter] public string Value { get; set; } = """";
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool IsPressed => Group?.IsPressed(Value) == true;
+    private bool IsDisabled => Disabled || Group?.Disabled == true;
+
+    protected override void OnInitialized() => Group?.Register(this);
+
+    internal void Refresh() => InvokeAsync(StateHasChanged);
+
+    private async Task ToggleAsync()
+    {
+        if (Group != null) await Group.ToggleAsync(Value);
+    }
+
+    public void Dispose() => Group?.Unregister(this);
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/ToggleGroupTemplate.cs b/src/ShellUI.Templates/Templates/ToggleGroupTemplate.cs
new file mode 100644
index 0000000..8ec8be3
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/ToggleGroupTemplate.cs
@@ -0,0 +1,64 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class ToggleGroupTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "toggle-group",
+        DisplayName = "Toggle Group",
+        Description = "Single or multiple selection toggle buttons",
+        Category = ComponentCategory.Form,
+        FilePath = "ToggleGroup.razor",
+        Dependencies = new List<string> { "toggle-group-item" },
+        Tags = new List<string> { "toggle", "group", "segmented" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<CascadingValue Value=""this"" IsFixed=""true"">
+    <div role=""@(Multiple ? ""group"" : ""radiogroup"")"" class=""@Shell.Cn(""inline-flex items-center gap-1"", Class)"" @attributes=""AdditionalAttributes"">
+        @ChildContent
+    </div>
+</CascadingValue>
+
+@code {
+    [Parameter] public bool Multiple { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public List<string> Values { get; set; } = new();
+    [Parameter] public EventCallback<List<string>> ValuesChanged { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private readonly List<ToggleGroupItem> _items = new();
+
+    internal void Register(ToggleGroupItem item) => _items.Add(item);
+    internal void Unregister(ToggleGroupItem item) => _items.Remove(item);
+
+    public bool IsPressed(string value) => Multiple ? Values.Contains(value) : Value == value;
+
+    public async Task ToggleAsync(string value)
+    {
+        if (Multiple)
+        {
+            var next = new List<string>(Values);
+            if (!next.Remove(value)) next.Add(value);
+            Values = next;
+            await ValuesChanged.InvokeAsync(next);
+        }
+        else
+        {
+            Value = Value == value ? null : value;
+            await ValueChanged.InvokeAsync(Value);
+        }
+
+        foreach (var item in _items.ToArray()) item.Refresh();
+    }
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/TreeViewItemTemplate.cs b/src/ShellUI.Templates/Templates/TreeViewItemTemplate.cs
new file mode 100644
index 0000000..6c01443
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/TreeViewItemTemplate.cs
@@ -0,0 +1,88 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class TreeViewItemTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "tree-view-item",
+        DisplayName = "Tree View Item",
+        Description = "Node for TreeView",
+        Category = ComponentCategory.Navigation,
+        FilePath = "TreeViewItem.razor",
+        IsAvailable = false,
+        Dependencies = new List<string>(),
+        Tags = new List<string> { "tree" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@implements IDisposable
+
+<li role=""treeitem""
+    aria-expanded=""@(HasChildren ? (_expanded ? ""true"" : ""false"") : null)""
+    aria-selected=""@(IsSelected ? ""true"" : ""false"")""
+    class=""@Shell.Cn(Class)""
+    @attributes=""AdditionalAttributes"">
+    <button type=""button"" disabled=""@Disabled"" @onclick=""HandleClickAsync""
+            class=""@Shell.Cn(""flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"", IsSelected ? ""bg-accent font-medium text-accent-foreground"" : ""text-foreground hover:bg-muted"")"">
+        @if (HasChildren)
+        {
+            <svg class=""@Shell.Cn(""h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"", _expanded ? ""rotate-90"" : """")"" 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=""M9 5l7 7-7 7"" />
+            </svg>
+        }
+        else
+        {
+            <span class=""w-4 shrink-0""></span>
+        }
+        @if (Icon != null)
+        {
+            <span class=""flex shrink-0 text-muted-foreground [&>svg]:size-4"">@Icon</span>
+        }
+        <span class=""truncate"">@Label</span>
+    </button>
+    @if (HasChildren && _expanded)
+    {
+        <ul role=""group"" class=""ml-4 mt-0.5 space-y-0.5 border-l border-border pl-2"">
+            @ChildContent
+        </ul>
+    }
+</li>
+
+@code {
+    [CascadingParameter] public TreeView? Tree { get; set; }
+    [Parameter] public string Label { get; set; } = """";
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public bool DefaultExpanded { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public RenderFragment? Icon { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private bool _expanded;
+
+    private string EffectiveValue => Value ?? Label;
+    private bool HasChildren => ChildContent != null;
+    private bool IsSelected => Tree?.SelectedValue == EffectiveValue;
+
+    protected override void OnInitialized()
+    {
+        _expanded = DefaultExpanded;
+        Tree?.Register(this);
+    }
+
+    internal void Refresh() => InvokeAsync(StateHasChanged);
+
+    private async Task HandleClickAsync()
+    {
+        if (HasChildren) _expanded = !_expanded;
+        if (Tree != null) await Tree.SelectAsync(EffectiveValue);
+    }
+
+    public void Dispose() => Tree?.Unregister(this);
+}
+";
+}
diff --git a/src/ShellUI.Templates/Templates/TreeViewTemplate.cs b/src/ShellUI.Templates/Templates/TreeViewTemplate.cs
new file mode 100644
index 0000000..87bd645
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/TreeViewTemplate.cs
@@ -0,0 +1,47 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class TreeViewTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "tree-view",
+        DisplayName = "Tree View",
+        Description = "Expandable, selectable hierarchical tree",
+        Category = ComponentCategory.Navigation,
+        FilePath = "TreeView.razor",
+        Dependencies = new List<string> { "tree-view-item" },
+        Tags = new List<string> { "tree", "hierarchy", "navigation" }
+    };
+
+    public static string Content => @"@namespace YourProjectNamespace.Components.UI
+
+<CascadingValue Value=""this"" IsFixed=""true"">
+    <ul role=""tree"" class=""@Shell.Cn(""space-y-0.5 text-sm"", Class)"" @attributes=""AdditionalAttributes"">
+        @ChildContent
+    </ul>
+</CascadingValue>
+
+@code {
+    [Parameter] public string? SelectedValue { get; set; }
+    [Parameter] public EventCallback<string?> SelectedValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private readonly List<TreeViewItem> _items = new();
+
+    internal void Register(TreeViewItem item) => _items.Add(item);
+    internal void Unregister(TreeViewItem item) => _items.Remove(item);
+
+    public async Task SelectAsync(string value)
+    {
+        SelectedValue = value;
+        await SelectedValueChanged.InvokeAsync(value);
+        foreach (var item in _items.ToArray()) item.Refresh();
+    }
+}
+";
+}

From 4816a5d4ba5337994b670841b10e828c11b07b1c Mon Sep 17 00:00:00 2001
From: Shewatipa Tseisi <shewatipa@chips.co.zw>
Date: Sun, 27 Sep 2026 14:32:47 +0200
Subject: [PATCH 5/7] feat(tests): add new tests for required imports and CSS
 behavior

- Introduced `RequiredImportsTests` to validate namespace imports for component files.
- Added `InputCssTests` to ensure focus outline behavior is correctly applied in the CSS templates.
- Expanded `TemplateSyncTests` with additional data entries for new UI components, enhancing template validation coverage.
---
 ShellUI.Tests/InitBootstrapTests.cs           | 27 +++++++++++++++++++
 ShellUI.Tests/NuGetDepsAndSuggestionsTests.cs | 11 ++++++++
 ShellUI.Tests/TemplateSyncTests.cs            | 18 +++++++++++++
 3 files changed, 56 insertions(+)

diff --git a/ShellUI.Tests/InitBootstrapTests.cs b/ShellUI.Tests/InitBootstrapTests.cs
index b78de84..bedaecd 100644
--- a/ShellUI.Tests/InitBootstrapTests.cs
+++ b/ShellUI.Tests/InitBootstrapTests.cs
@@ -132,3 +132,30 @@ public void RewriteWasmIndexHtml_IsIdempotent()
         Assert.Equal(once, twice);
     }
 }
+
+public class RequiredImportsTests
+{
+    [Fact]
+    public void VariantsAndModelsFiles_AddTheirNamespaces()
+    {
+        var imports = ComponentInstaller.RequiredImports("App", new[] { "Button.razor", "Variants/ButtonVariants.cs", "Models/CommandModels.cs" }).ToList();
+
+        Assert.Equal(new[] { "@using App.Components.UI.Variants", "@using App.Components.Models" }, imports);
+    }
+
+    [Fact]
+    public void PlainComponents_AddNothing()
+    {
+        Assert.Empty(ComponentInstaller.RequiredImports("App", new[] { "Kbd.razor", "../../wwwroot/shellui.js" }));
+    }
+}
+
+public class InputCssTests
+{
+    [Fact]
+    public void BaseLayer_HidesFocusOutlineOnNavigatedHeading()
+    {
+        // FocusOnNavigate focuses the page h1; the stock app.css rule that hides its outline is overwritten by init.
+        Assert.Contains("h1:focus {\n    outline: none;", ShellUI.Templates.CssTemplates.InputCss.Replace("\r\n", "\n"));
+    }
+}
diff --git a/ShellUI.Tests/NuGetDepsAndSuggestionsTests.cs b/ShellUI.Tests/NuGetDepsAndSuggestionsTests.cs
index db68bcb..15673a9 100644
--- a/ShellUI.Tests/NuGetDepsAndSuggestionsTests.cs
+++ b/ShellUI.Tests/NuGetDepsAndSuggestionsTests.cs
@@ -219,6 +219,17 @@ public void ShellUiJs_ProvidesSidebarLifecycleInterop()
         Assert.Contains("this._sidebarHandlers.delete(handle)", content!);
     }
 
+    [Fact]
+    public void Shortcuts_AcceptCtrlOrMetaRatherThanBoth()
+    {
+        const string either = "(ctrl && e.ctrlKey) || (meta && e.metaKey)";
+        var template = ComponentRegistry.GetComponentContent("shellui-js");
+        var package = File.ReadAllText(Path.Combine(FindRepositoryRoot(), "src", "ShellUI.Components", "wwwroot", "shellui.js"));
+
+        Assert.Contains(either, template!);
+        Assert.Contains(either, package);
+    }
+
     [Fact]
     public void SidebarJs_IsRetainedOnlyAsAHiddenLegacyAlias()
     {
diff --git a/ShellUI.Tests/TemplateSyncTests.cs b/ShellUI.Tests/TemplateSyncTests.cs
index 1467234..fbed9ee 100644
--- a/ShellUI.Tests/TemplateSyncTests.cs
+++ b/ShellUI.Tests/TemplateSyncTests.cs
@@ -35,6 +35,24 @@ public class TemplateSyncTests
     [InlineData("donut-chart", "DonutChart.razor")]
     [InlineData("radar-chart", "RadarChart.razor")]
     [InlineData("radial-chart", "RadialChart.razor")]
+    [InlineData("kbd", "Kbd.razor")]
+    [InlineData("aspect-ratio", "AspectRatio.razor")]
+    [InlineData("button-group", "ButtonGroup.razor")]
+    [InlineData("toggle-group", "ToggleGroup.razor")]
+    [InlineData("toggle-group-item", "ToggleGroupItem.razor")]
+    [InlineData("input-group", "InputGroup.razor")]
+    [InlineData("number-input", "NumberInput.razor")]
+    [InlineData("stat-card", "StatCard.razor")]
+    [InlineData("timeline", "Timeline.razor")]
+    [InlineData("timeline-item", "TimelineItem.razor")]
+    [InlineData("tree-view", "TreeView.razor")]
+    [InlineData("tree-view-item", "TreeViewItem.razor")]
+    [InlineData("qr-code", "QrCode.razor")]
+    [InlineData("image-viewer", "ImageViewer.razor")]
+    [InlineData("chat-message", "ChatMessage.razor")]
+    [InlineData("chat-input", "ChatInput.razor")]
+    [InlineData("chat", "Chat.razor")]
+    [InlineData("command", "Command.razor")]
     public void TemplateCodeBlock_MatchesLiveLibrary(string templateName, string razorFileName)
     {
         if (AllowedDrift.ContainsKey(templateName)) return;

From 7173068eb6319b5f1bba3ab9c8aecb8253ab47b6 Mon Sep 17 00:00:00 2001
From: Shewatipa Tseisi <shewatipa@chips.co.zw>
Date: Sun, 27 Sep 2026 14:33:09 +0200
Subject: [PATCH 6/7] feat: expand component registry and update content
 retrieval

- Added multiple new UI components to the ComponentRegistry, including Kbd, AspectRatio, ButtonGroup, ToggleGroup, InputGroup, NumberInput, StatCard, Timeline, TreeView, QrCode, ImageViewer, ChatMessage, ChatInput, and CommandModels.
- Updated the GetComponentContent method to include content retrieval for the newly added components, enhancing the overall functionality and usability of the component library.
---
 src/ShellUI.Templates/ComponentRegistry.cs | 38 +++++++++++++++++++++-
 src/ShellUI.Templates/CssTemplates.cs      |  3 ++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/ShellUI.Templates/ComponentRegistry.cs b/src/ShellUI.Templates/ComponentRegistry.cs
index 7d48bfa..e55ff41 100644
--- a/src/ShellUI.Templates/ComponentRegistry.cs
+++ b/src/ShellUI.Templates/ComponentRegistry.cs
@@ -182,7 +182,25 @@ public static class ComponentRegistry
         { "callout-variants", CalloutVariantsTemplate.Metadata },
         { "callout", CalloutTemplate.Metadata },
         { "link-card", LinkCardTemplate.Metadata },
-        { "prev-next-nav", PrevNextNavTemplate.Metadata }
+        { "prev-next-nav", PrevNextNavTemplate.Metadata },
+        { "kbd", KbdTemplate.Metadata },
+        { "aspect-ratio", AspectRatioTemplate.Metadata },
+        { "button-group", ButtonGroupTemplate.Metadata },
+        { "toggle-group", ToggleGroupTemplate.Metadata },
+        { "toggle-group-item", ToggleGroupItemTemplate.Metadata },
+        { "input-group", InputGroupTemplate.Metadata },
+        { "number-input", NumberInputTemplate.Metadata },
+        { "stat-card", StatCardTemplate.Metadata },
+        { "timeline", TimelineTemplate.Metadata },
+        { "timeline-item", TimelineItemTemplate.Metadata },
+        { "tree-view", TreeViewTemplate.Metadata },
+        { "tree-view-item", TreeViewItemTemplate.Metadata },
+        { "qr-code", QrCodeTemplate.Metadata },
+        { "image-viewer", ImageViewerTemplate.Metadata },
+        { "chat-message", ChatMessageTemplate.Metadata },
+        { "chat-input", ChatInputTemplate.Metadata },
+        { "chat", ChatTemplate.Metadata },
+        { "command-models", CommandModelsTemplate.Metadata },
     };
 
     public static string? GetComponentContent(string componentName)
@@ -365,6 +383,24 @@ public static class ComponentRegistry
             "callout" => CalloutTemplate.Content,
             "link-card" => LinkCardTemplate.Content,
             "prev-next-nav" => PrevNextNavTemplate.Content,
+            "kbd" => KbdTemplate.Content,
+            "aspect-ratio" => AspectRatioTemplate.Content,
+            "button-group" => ButtonGroupTemplate.Content,
+            "toggle-group" => ToggleGroupTemplate.Content,
+            "toggle-group-item" => ToggleGroupItemTemplate.Content,
+            "input-group" => InputGroupTemplate.Content,
+            "number-input" => NumberInputTemplate.Content,
+            "stat-card" => StatCardTemplate.Content,
+            "timeline" => TimelineTemplate.Content,
+            "timeline-item" => TimelineItemTemplate.Content,
+            "tree-view" => TreeViewTemplate.Content,
+            "tree-view-item" => TreeViewItemTemplate.Content,
+            "qr-code" => QrCodeTemplate.Content,
+            "image-viewer" => ImageViewerTemplate.Content,
+            "chat-message" => ChatMessageTemplate.Content,
+            "chat-input" => ChatInputTemplate.Content,
+            "chat" => ChatTemplate.Content,
+            "command-models" => CommandModelsTemplate.Content,
             _ => null
         };
     }
diff --git a/src/ShellUI.Templates/CssTemplates.cs b/src/ShellUI.Templates/CssTemplates.cs
index e8143d2..8c19744 100644
--- a/src/ShellUI.Templates/CssTemplates.cs
+++ b/src/ShellUI.Templates/CssTemplates.cs
@@ -209,6 +209,9 @@ @layer base {
     background-color: var(--background);
     color: var(--foreground);
   }
+  h1:focus {
+    outline: none;
+  }
 }
 
 html, body, :host {

From dfcb77c17c547eaadfe35e5b15f92c2761f6eef4 Mon Sep 17 00:00:00 2001
From: Shewatipa Tseisi <shewatipa@chips.co.zw>
Date: Sun, 27 Sep 2026 14:33:36 +0200
Subject: [PATCH 7/7] feat: enhance import management for components

- Added `EnsureImports` method to manage and update necessary namespace imports for component files dynamically.
- Introduced `RequiredImports` method to determine required namespaces based on file paths, improving the integration of components with sub-namespaces.
- Updated the import handling logic to append missing imports to the `_Imports.razor` file, ensuring that all required namespaces are included for proper functionality.
---
 .../Services/ComponentInstaller.cs            | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/ShellUI.CLI/Services/ComponentInstaller.cs b/src/ShellUI.CLI/Services/ComponentInstaller.cs
index bd61efc..30d778b 100644
--- a/src/ShellUI.CLI/Services/ComponentInstaller.cs
+++ b/src/ShellUI.CLI/Services/ComponentInstaller.cs
@@ -93,6 +93,8 @@ await AnsiConsole.Status()
             }
         }
 
+        EnsureImports(projectInfo, installedSet);
+
         // Update config
         var updatedJson = JsonSerializer.Serialize(config, new JsonSerializerOptions
         {
@@ -410,6 +412,36 @@ private static async Task<List<NuGetDependency>> InstallNuGetDependenciesAsync(P
         return failed;
     }
 
+    // Consumer pages reference helper types such as ButtonVariant and CommandItem, which live in
+    // sub-namespaces; the imports are only added once a file in that namespace exists.
+    public static IEnumerable<string> RequiredImports(string rootNamespace, IEnumerable<string> filePaths)
+    {
+        var paths = filePaths.Select(p => p.Replace('\\', '/')).ToList();
+        if (paths.Any(p => p.StartsWith("Variants/", StringComparison.Ordinal)))
+            yield return $"@using {rootNamespace}.Components.UI.Variants";
+        if (paths.Any(p => p.Contains("Models/", StringComparison.Ordinal)))
+            yield return $"@using {rootNamespace}.Components.Models";
+    }
+
+    private static void EnsureImports(ProjectInfo projectInfo, IEnumerable<string> installed)
+    {
+        var importsPath = new[] { Path.Combine("Components", "_Imports.razor"), "_Imports.razor" }
+            .Select(p => Path.Combine(Directory.GetCurrentDirectory(), p))
+            .FirstOrDefault(File.Exists);
+        if (importsPath == null) return;
+
+        var existing = File.ReadAllLines(importsPath).Select(l => l.Trim()).ToHashSet();
+        var filePaths = installed
+            .Select(ComponentRegistry.GetMetadata)
+            .Where(m => m != null && !m.IsLayoutBlock)
+            .Select(m => m!.FilePath);
+        var missing = RequiredImports(projectInfo.RootNamespace, filePaths).Where(u => !existing.Contains(u)).ToList();
+        if (missing.Count == 0) return;
+
+        File.AppendAllText(importsPath, Environment.NewLine + string.Join(Environment.NewLine, missing) + Environment.NewLine);
+        AnsiConsole.MarkupLine($"[green]Updated:[/] {Path.GetRelativePath(Directory.GetCurrentDirectory(), importsPath)} ({string.Join(", ", missing)})");
+    }
+
     internal static bool IsShellUiJsCompatible()
     {
         var metadata = ComponentRegistry.GetMetadata("shellui-js");