Add shared frontend primitive components

src/RolemasterDb.App/Components/Pages/Tables.razor

@@ -33,7 +33,7 @@
                         <span class="table-select-trigger-chips">
                             @if (PinnedTablesState.IsPinned(selected.Key))
                             {
-                                <span class="chip">Pinned</span>
+                                <StatusChip Tone="accent">Pinned</StatusChip>
                             }
                             <span class="chip">@($"{selected.CurationPercentage}%")</span>
                         </span>
@@ -59,7 +59,7 @@
                                 <span class="table-select-option-chips">
                                     @if (PinnedTablesState.IsPinned(table.Key))
                                     {
-                                        <span class="chip">Pinned</span>
+                                        <StatusChip Tone="accent">Pinned</StatusChip>
                                     }
                                     <span class="chip">@($"{table.CurationPercentage}%")</span>
                                 </span>

src/RolemasterDb.App/Components/Primitives/AppBarActionButton.razor

@@ -0,0 +1,37 @@
+<button
+    type="@Type"
+    class="@BuildCssClass()"
+    title="@Title"
+    aria-label="@AriaLabel"
+    disabled="@Disabled"
+    @onclick="OnClick">
+    @ChildContent
+</button>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+    [Parameter]
+    public string Type { get; set; } = "button";
+
+    [Parameter]
+    public string Title { get; set; } = string.Empty;
+
+    [Parameter]
+    public string? AriaLabel { get; set; }
+
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string BuildCssClass() =>
+        string.IsNullOrWhiteSpace(CssClass)
+            ? "app-bar-action-button"
+            : $"app-bar-action-button {CssClass}";
+}

src/RolemasterDb.App/Components/Primitives/InspectorSection.razor

@@ -0,0 +1,46 @@
+<section class="@BuildCssClass()">
+    @if (!string.IsNullOrWhiteSpace(Title) || HeaderContent is not null)
+    {
+        <header class="inspector-section-header">
+            <div>
+                @if (!string.IsNullOrWhiteSpace(Title))
+                {
+                    <h3 class="inspector-section-title">@Title</h3>
+                }
+
+                @if (!string.IsNullOrWhiteSpace(Description))
+                {
+                    <p class="inspector-section-copy">@Description</p>
+                }
+            </div>
+
+            @HeaderContent
+        </header>
+    }
+
+    <div class="inspector-section-body">
+        @ChildContent
+    </div>
+</section>
+
+@code {
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public string? Description { get; set; }
+
+    [Parameter]
+    public RenderFragment? HeaderContent { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string BuildCssClass() =>
+        string.IsNullOrWhiteSpace(CssClass)
+            ? "inspector-section"
+            : $"inspector-section {CssClass}";
+}

src/RolemasterDb.App/Components/Primitives/SegmentedTabItem.cs

@@ -0,0 +1,7 @@
+namespace RolemasterDb.App.Components.Primitives;
+
+public sealed record SegmentedTabItem(
+    string Value,
+    string Label,
+    string? Badge = null,
+    bool IsDisabled = false);

src/RolemasterDb.App/Components/Primitives/SegmentedTabs.razor

@@ -0,0 +1,45 @@
+<div class="@BuildCssClass()" role="tablist" aria-label="@AriaLabel">
+    @foreach (var item in Items)
+    {
+        var isSelected = string.Equals(item.Value, SelectedValue, StringComparison.Ordinal);
+
+        <button
+            type="button"
+            class="segmented-tabs-button @(isSelected ? "is-selected" : null)"
+            role="tab"
+            aria-selected="@isSelected"
+            disabled="@item.IsDisabled"
+            @onclick="() => SelectAsync(item.Value)">
+            <span>@item.Label</span>
+            @if (!string.IsNullOrWhiteSpace(item.Badge))
+            {
+                <span class="segmented-tabs-badge">@item.Badge</span>
+            }
+        </button>
+    }
+</div>
+
+@code {
+    [Parameter]
+    public IReadOnlyList<SegmentedTabItem> Items { get; set; } = [];
+
+    [Parameter]
+    public string? SelectedValue { get; set; }
+
+    [Parameter]
+    public EventCallback<string> SelectedValueChanged { get; set; }
+
+    [Parameter]
+    public string AriaLabel { get; set; } = "Options";
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string BuildCssClass() =>
+        string.IsNullOrWhiteSpace(CssClass)
+            ? "segmented-tabs"
+            : $"segmented-tabs {CssClass}";
+
+    private Task SelectAsync(string value) =>
+        SelectedValueChanged.InvokeAsync(value);
+}

src/RolemasterDb.App/Components/Primitives/StatusChip.razor

@@ -0,0 +1,25 @@
+<span class="@BuildCssClass()">
+    @ChildContent
+</span>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string Tone { get; set; } = "neutral";
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string BuildCssClass()
+    {
+        var classes = new List<string> { "ui-status-chip", $"is-{Tone.Trim().ToLowerInvariant()}" };
+        if (!string.IsNullOrWhiteSpace(CssClass))
+        {
+            classes.Add(CssClass);
+        }
+
+        return string.Join(' ', classes);
+    }
+}

src/RolemasterDb.App/Components/Primitives/StatusIndicator.razor

@@ -0,0 +1,29 @@
+<span class="@BuildCssClass()">
+    <span class="ui-status-indicator-dot" aria-hidden="true"></span>
+    @if (ChildContent is not null)
+    {
+        <span class="ui-status-indicator-label">@ChildContent</span>
+    }
+</span>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string Tone { get; set; } = "neutral";
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string BuildCssClass()
+    {
+        var classes = new List<string> { "ui-status-indicator", $"is-{Tone.Trim().ToLowerInvariant()}" };
+        if (!string.IsNullOrWhiteSpace(CssClass))
+        {
+            classes.Add(CssClass);
+        }
+
+        return string.Join(' ', classes);
+    }
+}

src/RolemasterDb.App/Components/Primitives/SurfaceDrawer.razor

@@ -0,0 +1,77 @@
+@if (IsOpen)
+{
+    <button
+        type="button"
+        class="surface-drawer-backdrop"
+        aria-label="@CloseLabel"
+        @onclick="HandleCloseAsync"></button>
+
+    <aside class="@BuildCssClass()" aria-label="@AriaLabel">
+        @if (!string.IsNullOrWhiteSpace(Title) || HeaderContent is not null || OnClose.HasDelegate)
+        {
+            <header class="surface-drawer-header">
+                <div>
+                    @if (!string.IsNullOrWhiteSpace(Title))
+                    {
+                        <strong class="surface-drawer-title">@Title</strong>
+                    }
+                </div>
+
+                <div class="surface-drawer-header-actions">
+                    @HeaderContent
+                    @if (OnClose.HasDelegate)
+                    {
+                        <button type="button" class="btn btn-link" @onclick="HandleCloseAsync">Close</button>
+                    }
+                </div>
+            </header>
+        }
+
+        <div class="surface-drawer-body">
+            @ChildContent
+        </div>
+    </aside>
+}
+
+@code {
+    [Parameter]
+    public bool IsOpen { get; set; }
+
+    [Parameter]
+    public string Placement { get; set; } = "end";
+
+    [Parameter]
+    public string AriaLabel { get; set; } = "Drawer";
+
+    [Parameter]
+    public string CloseLabel { get; set; } = "Close panel";
+
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public RenderFragment? HeaderContent { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public EventCallback OnClose { get; set; }
+
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    private string BuildCssClass()
+    {
+        var classes = new List<string> { "surface-drawer", $"is-{Placement.Trim().ToLowerInvariant()}" };
+        if (!string.IsNullOrWhiteSpace(CssClass))
+        {
+            classes.Add(CssClass);
+        }
+
+        return string.Join(' ', classes);
+    }
+
+    private Task HandleCloseAsync() =>
+        OnClose.InvokeAsync();
+}

src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor

@@ -1,3 +1,3 @@
-<button type="button" class="shell-omnibox-trigger" disabled title="Shared omnibox arrives in Phase 2.">
+<AppBarActionButton CssClass="shell-omnibox-trigger" Disabled="true" Title="Shared omnibox arrives in Phase 2." AriaLabel="Search tables or commands">
     <span class="shell-omnibox-trigger-label">Search tables or commands</span>
-</button>
+</AppBarActionButton>

src/RolemasterDb.App/Components/_Imports.razor

@@ -11,6 +11,7 @@
 @using RolemasterDb.App
 @using RolemasterDb.App.Components
 @using RolemasterDb.App.Components.Layout
+@using RolemasterDb.App.Components.Primitives
 @using RolemasterDb.App.Components.Shell
 @using RolemasterDb.App.Components.Shared
 @using RolemasterDb.App.Components.Tools