### MudX Configuration Guide

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/MANIFEST.txt

Instructions for installing and configuring the MudX library, including setup procedures and provider configurations.

```APIDOC
## MudX Configuration Guide

### Description
This guide provides detailed instructions for installing and configuring the MudX library. It covers essential setup procedures, provider configurations, component-specific settings, build configurations, theme integration, performance considerations, and security notes.

### Installation Instructions
[Steps for installing the MudX library]

### Setup Procedures
[Procedures for initial setup and configuration]

### Provider Configuration
[Details on configuring various providers]

### Component-Specific Configuration
[Configuration options for individual components]

### Build Configuration
[Information related to build processes]

### Theme Integration
[How to integrate MudX with existing themes]

### Performance Considerations
[Tips for optimizing performance]

### Security Notes
[Important security-related information]
```

--------------------------------

### MudXSplitter with Size Constraints Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-splitter.md

Illustrates setting minimum sizes for both start and end panels to enforce specific resizing boundaries.

```html
<MudXSplitter StartSize="50"
              StartMinimumSize="25"
              EndMinimumSize="25">
    <!-- Start panel can be 25%-75% of container -->
    <StartSplitter>Min width: 25%</StartSplitter>
    <EndSplitter>Min width: 25%</EndSplitter>
</MudXSplitter>
```

--------------------------------

### Pattern Syntax and Examples

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Explains the syntax for defining input patterns in MudXSecurityCode, including placeholder characters and provides practical examples for common use cases like OTPs, dates, and license plates.

```APIDOC
## Pattern Syntax

Pattern placeholders define which characters are accepted at each position:

| Placeholder | Type | Validation |
|-------------|------|-----------|
| `#` | Numeric | `char.IsDigit()` |
| `A` | Alphabetic | `char.IsLetter()` |
| `?` | Alphanumeric | `char.IsLetterOrDigit()` |
| `@` | Special | `char.IsSymbol()` or `char.IsPunctuation()` |
| `*` | Any | Any UTF-8 character |
| Any other character | Fixed | Must match exactly |

## Pattern Examples

```csharp
// Four digit code (e.g., SMS OTP)
Pattern="####"

// Date format MM/DD/YYYY
Pattern="##/##/19##"

// Mixed alphanumeric format
Pattern="??-??-??"

// License plate format
Pattern="AAA-####"
```
```

--------------------------------

### Basic Horizontal MudXSplitter Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-splitter.md

Demonstrates a basic horizontal splitter with initial size and minimum size constraints for both panels.

```html
<MudXSplitter StartSize="30" StartMinimumSize="20" EndMinimumSize="20">
    <StartSplitter>
        <div>Left Panel (30%)</div>
    </StartSplitter>
    <EndSplitter>
        <div>Right Panel (70%)</div>
    </EndSplitter>
</MudXSplitter>
```

--------------------------------

### Example Usage of MudXSecurityCode

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Demonstrates how to integrate the MudXSecurityCode component into a Blazor application, including basic setup, two-way binding with a verification code, and triggering a verification action.

```APIDOC
## Example Usage

```csharp
@page "/security-code"
@using MudX

<MudXSecurityCode 
    @bind-Code="verificationCode"
    Pattern="####"
    Password="false"
    Horizontal="true"
    Variant="Variant.Outlined" />

<MudButton OnClick="VerifyCode">Verify</MudButton>

@code {
    string? verificationCode;

    async Task VerifyCode()
    {
        if (!string.IsNullOrEmpty(verificationCode))
        {
            // Send code for verification
        }
    }
}
```
```

--------------------------------

### Install MudX.MudBlazor.Extension Package

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/README.md

Use the .NET CLI to add the MudX.MudBlazor.Extension package to your project. This is the first step for integrating the library.

```bash
dotnet add package MudX.MudBlazor.Extension
```

--------------------------------

### MudXOutline Component Usage

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-outline.md

Example of how to use the MudXOutline component with header, footer, and child content.

```APIDOC
## MudXOutline Component

### Description

The MudXOutline component is a UI element that displays a table of contents, often used for navigation within a page. It supports custom header and footer content, and integrates with scroll spy features to highlight the active section.

### Features

- **Automatic Section Tracking**: Detects which section is in the viewport.
- **Active Section Highlighting**: Highlights the corresponding entry in the table of contents.
- **Smooth Scrolling**: Allows clicking on table of contents entries to scroll smoothly to the respective sections.
- **Responsive Design**: Adapts its visibility based on screen size.
- **Flexible Positioning**: Can be fixed or absolute depending on the scroll container.

### Example Usage

```csharp
<MudXOutline>
    <HeaderIndexContent>
        <MudText Typo="Typo.body2">Quick Links</MudText>
    </HeaderIndexContent>

    <ChildContent>
        <!-- Main content goes here -->
    </ChildContent>

    <FooterIndexContent>
        <MudButton Size="Size.Small">More</MudButton>
    </FooterIndexContent>
</MudXOutline>
```
```

--------------------------------

### MudXChatFooter Example Usage

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-chat.md

Demonstrates how to use the MudXChatFooter component with text and custom child content.

```razor
<MudXChatFooter Text="Sent at 2:45 PM" />
<MudXChatFooter>
    <MudIcon Icon="@Icons.Material.Filled.Done" size="Size.Small" />
    <span>Read</span>
</MudXChatFooter>
```

--------------------------------

### MudXChatHeader Example Usage

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-chat.md

Demonstrates how to use the MudXChatHeader component with different parameters and child content.

```razor
<MudXChatHeader Name="John Doe" Time="2:45 PM" />
<MudXChatHeader Name="Bot">
    <MudIcon Icon="@Icons.Material.Filled.VerifiedUser" />
</MudXChatHeader>
```

--------------------------------

### Basic MudX Component Setup

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/INDEX.md

Set up a basic MudX component like MudXChat with parameters. Ensure MudXProvider is in your root layout and @using MudX is in _Imports.razor.

```csharp
<MudXChat Color="Color.Primary">
    <MudXChatBubble>Message</MudXChatBubble>
</MudXChat>
```

--------------------------------

### MudXChat Example Usage

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-chat.md

Demonstrates how to use the MudXChat component with customizable chat bubbles and headers.

```razor
<MudXChat Color="Color.Primary" Variant="Variant.Filled" ChatPosition="ChatBubblePosition.Start">
    <MudXChatBubble>
        <MudXChatHeader Name="Alice" Time="10:30 AM" />
        <p>Hello, how are you?</p>
    </MudXChatBubble>
    <MudXChatBubble Color="Color.Info" ChatPosition="ChatBubblePosition.End">
        <p>I'm doing great!</p>
    </MudXChatBubble>
</MudXChat>
```

--------------------------------

### MudXChatBubble Example Usage

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-chat.md

Demonstrates how to use the MudXChatBubble component with click and context click event handlers.

```html
<MudXChatBubble Color="Color.Success" OnClick="HandleClick">
    <p>This is a clickable chat bubble</p>
</MudXChatBubble>

<MudXChatBubble OnContextClick="HandleContextMenu">
    <p>Right-click enabled bubble</p>
</MudXChatBubble>
```

--------------------------------

### Basic Copy Operation Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-clipboard.md

Demonstrates a basic copy operation using the MudXCopyToClipboard component. Inject the service and call CopyToClipboardAsync with the text to copy.

```razor
@inject MudXCopyToClipboard CopyService

<MudButton OnClick="CopyText">Copy to Clipboard</MudButton>

@code {
    private MudXCopyToClipboard? copyService;

    private async Task CopyText()
    {
        var result = await copyService!.CopyToClipboardAsync("Hello, World!");
        if (result.Success)
        {
            Console.WriteLine("Copied successfully");
        }
    }
}
```

--------------------------------

### Pattern Examples

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Demonstrates various pattern configurations for the MudXSecurityCode component, including numeric, date, alphanumeric, and license plate formats.

```csharp
// Four digit code (e.g., SMS OTP)
Pattern="####"
```

```csharp
// Date format MM/DD/YYYY
Pattern="##/##/19##"
```

```csharp
// Mixed alphanumeric format
Pattern="??-??-??"
```

```csharp
// License plate format
Pattern="AAA-####"
```

--------------------------------

### Basic Bottom Sheet Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-sheet.md

Demonstrates how to open and close a basic bottom sheet using a button. The sheet's visibility is controlled by the `Open` parameter.

```csharp
<MudButton OnClick="OpenSheet">Open Sheet</MudButton>

<MudXSheet @bind-Open="isOpen" Position="Position.Bottom">
    <h3>Sheet Content</h3>
    <p>This is a bottom sheet.</p>
    <MudButton OnClick="CloseSheet">Close</MudButton>
</MudXSheet>

@code {
    private bool isOpen = false;

    async Task OpenSheet() => isOpen = true;
    async Task CloseSheet() => isOpen = false;
}
```

--------------------------------

### Setup MudXProvider in Root Layout

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/README.md

Integrate the MudXProvider component into your root Blazor layout (e.g., MainLayout.razor or App.razor). This component is necessary for the library's functionality.

```csharp
@* MainLayout.razor or App.razor *@@lt;MudXProvider>@@
    @Body
@@lt;/MudXProvider>
```

--------------------------------

### Example Usage of MudXSecurityCode

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Shows how to use the MudXSecurityCode component with two-way binding for a verification code, along with a button to trigger verification.

```razor
@page "/security-code"
@using MudX

<MudXSecurityCode 
    @bind-Code="verificationCode"
    Pattern="####"
    Password="false"
    Horizontal="true"
    Variant="Variant.Outlined" />

<MudButton OnClick="VerifyCode">Verify</MudButton>

@code {
    string? verificationCode;

    async Task VerifyCode()
    {
        if (!string.IsNullOrEmpty(verificationCode))
        {
            // Send code for verification
        }
    }
}
```

--------------------------------

### Migrate to MudBlazor MudSplitPanel

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-splitter.md

Example of using MudBlazor's MudSplitPanel component as a replacement for the deprecated MudX Splitter. This is recommended for new projects.

```csharp
<MudSplitPanel>
    <Panel1>Left content</Panel1>
    <Panel2>Right content</Panel2>
</MudSplitPanel>
```

--------------------------------

### Basic Usage of MudXChat Component

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/README.md

Demonstrates how to use the MudXChat component to display chat bubbles. This example shows a simple chat interface with a header and a message.

```csharp
@using MudX@@
@@lt;MudXChat>@@
    @@lt;MudXChatBubble>@@
        @@lt;MudXChatHeader Name="Alice" Time="10:30 AM" />@@
        @@lt;p>Hello, how are you?@@lt;/p>@@
    @@lt;/MudXChatBubble>@@
@@lt;/MudXChat>
```

--------------------------------

### MudXSecurityCode Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Initializes a new instance of the MudXSecurityCode component. This constructor is used internally for component setup.

```csharp
public MudXSecurityCode()
```

--------------------------------

### MudXCodeBlock Theme CSS Files

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

List of available theme CSS files for MudXCodeBlock. These are automatically loaded from the Prism.js setup.

```text
prism-default.css
prism-okaidia.css
prism-dark.css
prism-funky.css
prism-twilight.css
prism-coy.css
prism-solarizedlight.css
prism-tomorrownight.css
prism-materiallight.css
prism-materialdark.css
```

--------------------------------

### Custom Pattern with Masking Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Shows how to configure the MudXSecurityCode component with a custom pattern and enable password masking for sensitive code inputs.

```APIDOC
## Custom Pattern with Masking Example

```csharp
<MudXSecurityCode 
    Pattern="????-????-????-????
```

--------------------------------

### Modal Dialog Sheet Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-sheet.md

Implements a modal dialog sheet positioned in the center. It is configured with `Standard="false"` and `EnableDragToSize="false"` for a modal behavior.

```csharp
<MudXSheet @bind-Open="dialogOpen"
           Position="Position.Center"
           Standard="false"
           EnableDragToSize="false">
    <MudPaper Class="pa-4">
        <h3>Modal Dialog</h3>
        <MudButton OnClick="ConfirmAction">Confirm</MudButton>
    </MudPaper>
</MudXSheet>
```

--------------------------------

### MudXOutlineSection Usage Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-outline.md

Demonstrates how to use MudXOutlineSection to create a nested outline structure. Each section can have a title and a unique SectionId for scrolling.

```csharp
<MudXOutline>
    <MudXOutlineSection Title="Chapter 1" SectionId="chapter-1">
        <MudXOutlineSection Title="Section 1.1" SectionId="section-1-1" />
        <MudXOutlineSection Title="Section 1.2" SectionId="section-1-2" />
    </MudXOutlineSection>
    <MudXOutlineSection Title="Chapter 2" SectionId="chapter-2">
        <MudXOutlineSection Title="Section 2.1" SectionId="section-2-1" />
    </MudXOutlineSection>
</MudXOutline>
```

--------------------------------

### Integrate MudXSecurityCode with MudForm

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

Example of integrating MudXSecurityCode within a MudForm for validation. Ensure the 'form' reference is correctly set up.

```csharp
<MudForm @ref="form">
    <MudXSecurityCode @bind-Code="code" Pattern="####" />
    <MudButton OnClick="@(async () => await form.Validate())">Submit</MudButton>
</MudForm>
```

--------------------------------

### Two-Way Binding Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Illustrates the use of two-way binding with the `Code` parameter of the MudXSecurityCode component, showing how to display the entered code in real-time.

```APIDOC
## Two-Way Binding Example

```csharp
<MudXSecurityCode 
    @bind-Code="code"
    Pattern="##/##/19##"
    Margin="Margin.Dense" />

<p>Entered Code: @code</p>

@code {
    private string? code;
}
```
```

--------------------------------

### MudXCodeBlock Example Usage

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-codeblock.md

Demonstrates how to use the MudXCodeBlock component in a Blazor page, configuring syntax highlighting, line numbers, brace matching, and copy button position.

```razor
@page "/code-demo"

<MudXCodeBlock Codes="codes" 
               Theme="CodeTheme.Okaidia"
               LineNumbers="true"
               MatchBraces="true"
               CopyOrigin="Origin.TopRight">
</MudXCodeBlock>

@code {
    List<CodeFile> codes = new()
    {
        new CodeFile(
            Title: "Program.cs",
            Code: "public class Program\n{\n    static void Main() { }\n}",
            Language: CodeLanguage.CSharp
        ),
        new CodeFile(
            Title: "style.css",
            Code: ".container { display: flex; }",
            Language: CodeLanguage.CSS
        )
    };
}
```

--------------------------------

### MudXProvider Usage in MainLayout.razor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

Example of integrating MudXProvider within the main layout structure, alongside MudLayout, MudAppBar, and MudMainContent. This ensures MudX features are available throughout the application.

```csharp
@* MainLayout.razor *@
@inherits LayoutComponentBase

<MudLayout>
    <MudAppBar Elevation="1">
        <MudText Typo="Typo.h6">My App</MudText>
    </MudAppBar>
    <MudMainContent>
        <MudXProvider>
            @Body
        </MudXProvider>
    </MudMainContent>
</MudLayout>
```

--------------------------------

### Sheet Size Control with Slider

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-sheet.md

Integrates a `MudSlider` to control the `CurrentSize` of the `MudXSheet`. This example demonstrates dynamic resizing of the sheet via user input.

```csharp
<MudXSheet @bind-Open="isOpen" @bind-CurrentSize="currentSize">
    <MudSlider @bind-Value="currentSize" Min="10" Max="100" />
    <p>Current Size: @currentSize%</p>
</MudXSheet>

@code {
    int currentSize = 50;
}
```

--------------------------------

### Two-Way Binding Example with Dense Margin

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Illustrates two-way binding for the security code with a specific date pattern and dense margin for a compact layout.

```razor
<MudXSecurityCode 
    @bind-Code="code"
    Pattern="##/##/19##"
    Margin="Margin.Dense" />

<p>Entered Code: @code</p>

@code {
    private string? code;
}
```

--------------------------------

### Create CodeFile Instances

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-codeblock.md

Demonstrates how to create instances of the CodeFile record for different programming languages. Ensure the correct CodeLanguage enum value is used for proper syntax highlighting.

```csharp
var pythonFile = new CodeFile(
    Title: "main.py",
    Code: "def hello():\n    print('Hello, World!')",
    Language: CodeLanguage.Python
);

var jsonFile = new CodeFile(
    Title: "config.json",
    Code: @"{ \"name\": \"app\", \"version\": \"1.0\" }",
    Language: CodeLanguage.JSON
);
```

--------------------------------

### MudXOutline Custom Scroll Container Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-outline.md

Example of configuring MudXOutline to use a custom scroll container. Specify the ScrollContainerSelector and SectionClassSelector to match your custom elements.

```cshtml
<MudXOutline ScrollContainerSelector="#scroll-area"
             SectionClassSelector="doc-section">
    <div id="scroll-area" style="height: 500px; overflow-y: auto;">
        <div id="section1" class="doc-section">...</div>
        <div id="section2" class="doc-section">...</div>
    </div>
</MudXOutline>
```

--------------------------------

### MudXSplitter with Two-Way Binding for Size

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-splitter.md

Illustrates how to use two-way binding with the `StartSize` parameter to dynamically control and display panel sizes.

```html
<MudXSplitter @bind-StartSize="panelSize">
    <StartSplitter>Left: @panelSize%</StartSplitter>
    <EndSplitter>Right: @(100 - panelSize)%</EndSplitter>
</MudXSplitter>

<MudSlider @bind-Value="panelSize" Min="0" Max="100" />

@code {
    int panelSize = 50;
}
```

--------------------------------

### MudXCopyToClipboard Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-clipboard.md

Initializes a new instance of the MudXCopyToClipboard component.

```csharp
public MudXCopyToClipboard()
```

--------------------------------

### Component Virtualization with Virtualize

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

Demonstrates how to use the `Virtualize` component for efficiently rendering large lists of items, such as chat bubbles or code blocks, to improve performance.

```razor
<Virtualize Items="bubbles">
    <MudXChatBubble>@context.Content</MudXChatBubble>
</Virtualize>
```

--------------------------------

### MudXSplitter Component

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-splitter.md

Documentation for the MudXSplitter component, detailing its parameters, orientations, and usage examples. This component is deprecated.

```APIDOC
## MudXSplitter Component

### Description
A component for creating resizable panel splitters. Allows users to drag a separator between two adjacent panels (left/top and right/bottom) to resize them. Supports both horizontal and vertical orientations and can be nested.

**Status**: Deprecated - Use `MudSplitPanel` from MudBlazor instead. This component will be removed in a future version.

### Parameters

| Parameter | Type | Default | Required | Description |
|---|---|---|---|---|
| StartSize | `int` | `50` | No | Initial size of start panel as percentage (0-100) |
| StartSizeChanged | `EventCallback<int>` | — | No | Callback when StartSize changes |
| StartMinimumSize | `int` | `0` | No | Minimum percentage for start panel |
| EndMinimumSize | `int` | `0` | No | Minimum percentage for end panel |
| Direction | `SplitterDirection` | `SplitterDirection.Horizontal` | No | Orientation (Horizontal or Vertical) |
| Height | `string` | `"100%"` | No | Container height (any CSS unit) |
| Width | `string` | `"100%"` | No | Container width (any CSS unit) |
| SeparatorTemplate | `RenderFragment` | `null` | No | Custom separator content |
| StartSplitter | `RenderFragment` | — | **Yes** | Left/top panel content |
| EndSplitter | `RenderFragment` | — | **Yes** | Right/bottom panel content |

### Orientations

**Horizontal Mode** (`SplitterDirection.Horizontal`)
- `StartSplitter` appears on the left
- `EndSplitter` appears on the right
- Drag separator left/right to resize

**Vertical Mode** (`SplitterDirection.Vertical`)
- `StartSplitter` appears on the top
- `EndSplitter` appears on the bottom
- Drag separator up/down to resize

### Methods

| Method | Return Type | Description |
|---|---|---|
| DisposeAsync | `ValueTask` | Clean up JavaScript resources |

### Example Usage

Basic horizontal splitter:

```csharp
<MudXSplitter StartSize="30" StartMinimumSize="20" EndMinimumSize="20">
    <StartSplitter>
        <div>Left Panel (30%)</div>
    </StartSplitter>
    <EndSplitter>
        <div>Right Panel (70%)</div>
    </EndSplitter>
</MudXSplitter>
```

Vertical splitter:

```csharp
<MudXSplitter Direction="SplitterDirection.Vertical" 
              StartSize="40"
              Height="400px"
              StartMinimumSize="100"
              EndMinimumSize="100">
    <StartSplitter>
        <div>Top Panel (40%)</div>
    </StartSplitter>
    <EndSplitter>
        <div>Bottom Panel (60%)</div>
    </EndSplitter>
</MudXSplitter>
```

Two-way binding for size:

```csharp
<MudXSplitter @bind-StartSize="panelSize">
    <StartSplitter>Left: @panelSize%</StartSplitter>
    <EndSplitter>Right: @(100 - panelSize)%</EndSplitter>
</MudXSplitter>

<MudSlider @bind-Value="panelSize" Min="0" Max="100" />

@code {
    int panelSize = 50;
}
```

Nested splitters (horizontal and vertical):

```csharp
<MudXSplitter Direction="SplitterDirection.Horizontal" StartSize="30">
    <StartSplitter>
        <!-- Left side content -->
    </StartSplitter>
    <EndSplitter>
        <MudXSplitter Direction="SplitterDirection.Vertical" StartSize="50">
            <StartSplitter>Top-right content</StartSplitter>
            <EndSplitter>Bottom-right content</EndSplitter>
        </MudXSplitter>
    </EndSplitter>
</MudXSplitter>
```

Custom separator:

```csharp
<MudXSplitter Direction="SplitterDirection.Horizontal" StartSize="50">
    <SeparatorTemplate>
        <div style="background: linear-gradient(to right, #ccc, #999, #ccc); 
                    cursor: col-resize; width: 4px;">
        </div>
    </SeparatorTemplate>
    <StartSplitter>Left</StartSplitter>
    <EndSplitter>Right</EndSplitter>
</MudXSplitter>
```

With size constraints:

```csharp
<MudXSplitter StartSize="50"
              StartMinimumSize="25"
              EndMinimumSize="25">
    <!-- Start panel can be 25%-75% of container -->
    <StartSplitter>Min width: 25%</StartSplitter>
    <EndSplitter>Min width: 25%</EndSplitter>
</MudXSplitter>

```

--------------------------------

### Basic MudXOutline Usage

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-outline.md

Demonstrates basic usage of the MudXOutline component with automatic section detection. Configure Anchor, StyleVariant, and TOCBreakpoint for desired appearance and behavior.

```cshtml
@page "/documentation"

<MudXOutline Anchor="Anchor.Right" 
             StyleVariant="OutlineStyleVariant.Scroll"
             TOCBreakpoint="Breakpoint.Md">
    <h1 id="introduction">Introduction</h1>
    <div class="mudx-toc-section">
        <p>Introduction content</p>
    </div>

    <h2 id="getting-started">Getting Started</h2>
    <div class="mudx-toc-section">
        <h3 id="installation">Installation</h3>
        <p>Installation steps...</p>
    </div>

    <h2 id="usage">Usage</h2>
    <div class="mudx-toc-section">
        <p>Usage information...</p>
    </div>
</MudXOutline>
```

--------------------------------

### MudXBreadcrumbsBase Usage in MainLayout

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-breadcrumbs.md

Example of how to integrate MudXBreadcrumbsBase into your main layout file (MainLayout.razor) to display breadcrumbs.

```razor
@inherits LayoutComponentBase

<MudLayout>
    <MudAppBar>
        <MudXBreadcrumbsBase HomeText="Dashboard" />
    </MudAppBar>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>
```

--------------------------------

### Project File Configuration (.csproj)

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

Configure your .csproj file to include XML documentation, generate NuGet symbols, and support source link. These settings ensure better package integration and debugging capabilities.

```xml
<PropertyGroup>
    <GenerateDocumentationFile>true</GenerateDocumentationFile>
    <SymbolPackageFormat>snupkg</SymbolPackageFormat>
    <PublishRepositoryUrl>true</PublishRepositoryUrl>
</PropertyGroup>
```

--------------------------------

### Include MudXProvider in Layout

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

Wrap your application's main content with MudXProvider in your root layout file (e.g., App.razor or MainLayout.razor) to initialize MudX features.

```html
<MudXProvider>
    @Body
</MudXProvider>
```

--------------------------------

### Get Assembly Package ID

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/types.md

Provides the package identifier for resource loading. Used by components that load JavaScript interop modules.

```csharp
public static class AssemblyInfo
{
    public static string PackageId { get; }
    public static string ModulePath(string moduleName) { }
}
```

--------------------------------

### Import MudX Namespace

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/OVERVIEW.md

Import the necessary MudX namespaces for using its components and extensions.

```csharp
@using MudX
@using MudX.Extensions
@using MudX.Utilities
```

--------------------------------

### Project File Configuration for MudX

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/OVERVIEW.md

Configure the project file for a Razor Class Library, enabling nullable references and implicit usings, and generating documentation.

```xml
<Project Sdk="Microsoft.NET.Sdk.Razor">
    <TargetFrameworks>net8.0;net9.0;net10.0</TargetFrameworks>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <GenerateDocumentationFile>true</GenerateDocumentationFile>
</Project>
```

--------------------------------

### Reference MudX CSS and JS in Host/Index HTML

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

Manually link the MudX CSS and JavaScript files in your _Host.cshtml or index.html. It is recommended to add cache busting for these resources.

```html
<link href="_content/MudX.MudBlazor.Extension/_mudx.min.css" rel="stylesheet" />
<script src="_content/MudX.MudBlazor.Extension/mudx.min.js"></script>
```

```html
<link href="_content/MudX.MudBlazor.Extension/_mudx.min.css?v=@DateTime.UtcNow.Ticks" rel="stylesheet" />
<script src="_content/MudX.MudBlazor.Extension/mudx.min.js?v=@DateTime.UtcNow.Ticks"></script>
```

--------------------------------

### Format Changed Files

Source: https://github.com/mudxtra/mudx/blob/dev/AGENTS.md

Apply code formatting to changed files using the 'dotnet format' command. Specify the project and the path to the changed files.

```bash
dotnet format <project.csproj> --include <path/to/changed/files>
```

--------------------------------

### MudXBreadcrumbsBase Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-breadcrumbs.md

Initializes a new instance of the MudXBreadcrumbsBase class, managing internal state for the HomeText parameter.

```csharp
public MudXBreadcrumbsBase()
```

--------------------------------

### MudXOutline Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-outline.md

Initializes a new instance of the MudXOutline component. This constructor is used internally for state management.

```csharp
public MudXOutline()
```

--------------------------------

### MudXOutline Scroll Container CSS Setup

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

CSS properties required for custom scroll containers when using MudXOutline. Ensure the element has 'overflow-y: auto;' and a specified height.

```css
overflow-y: auto;
height: specified-value;
```

--------------------------------

### Add MudBlazor Services to Program.cs

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

Ensure MudBlazor services are registered in your application's Program.cs file if not already present.

```csharp
builder.Services.AddMudServices();
```

--------------------------------

### Conditional Copy Handling Example

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-clipboard.md

Illustrates how to handle the result of a copy operation and display feedback to the user using MudAlert. The component's result is used to set the alert's severity and message.

```razor
<MudXCopyToClipboard @ref="copyService" />

<div>
    <MudTextField @bind-Value="textToCopy" Label="Text" />
    <MudButton OnClick="CopyAndHandle">Copy</MudButton>
</div>

<MudAlert Severity="@alertSeverity" Variant="Variant.Filled" Class="mt-4">
    @resultMessage
</MudAlert>

@code {
    private MudXCopyToClipboard? copyService;
    private string? textToCopy;
    private string resultMessage = "";
    private Severity alertSeverity = Severity.Normal;

    private async Task CopyAndHandle()
    {
        var result = await copyService!.CopyToClipboardAsync(textToCopy);
        resultMessage = result.Message;
        alertSeverity = result.Success ? Severity.Success : Severity.Error;
    }
}
```

--------------------------------

### MudXChatBubble Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-chat.md

Initializes a new instance of the MudXChatBubble component.

```csharp
public MudXChatBubble()
```

--------------------------------

### Clean, Build, and Test Projects

Source: https://github.com/mudxtra/mudx/blob/dev/AGENTS.md

Use these commands to clean, build, and test specific projects within the MudX solution. The test command includes filtering and blame options for targeted debugging.

```bash
dotnet clean <project.csproj>
```

```bash
dotnet build <project.csproj> --nologo
```

```bash
dotnet test tests/MudX.UnitTests/MudX.UnitTests.csproj --filter "FullyQualifiedName~MudXChat" --no-build --nologo --blame-hang --blame-hang-timeout 30s
```

--------------------------------

### Importing MudX JavaScript Module

Source: https://github.com/mudxtra/mudx/blob/dev/src/MudX/Scripts/Modules/README.txt

This C# code demonstrates how to asynchronously import a JavaScript module from the MudX extension. Ensure the JavaScript file is correctly placed and named for the import path to work.

```csharp
var _viewPortModule = await _js.InvokeAsync<IJSObjectReference>("import", "./_content/MudX.MudBlazor.Extension/modules/mudxOutline.js");
```

--------------------------------

### Importing JavaScript Modules in MudX Components

Source: https://github.com/mudxtra/mudx/blob/dev/AGENTS.md

Demonstrates how to add component-level JavaScript as a module and import it within a component. This ensures JavaScript is organized and managed effectively.

```csharp
using Microsoft.AspNetCore.Components;
using System.Threading.Tasks;

namespace MudX.MudX.Components.CodeBlock;

public partial class MudXCodeBlock
{
    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("mudxCodeBlock.initialize", Id);
        }
    }
}
```

--------------------------------

### Implement Test Description Field

Source: https://github.com/mudxtra/mudx/blob/dev/tests/MudX.UnitTests.Viewer/TestComponents/_README.txt

To display a test description in the viewer, implement a static string field named '__description__' within the @code section of your test component.

```csharp
@code {
    public static string __description__ = "...";
}
```

--------------------------------

### Run Projects Locally

Source: https://github.com/mudxtra/mudx/blob/dev/AGENTS.md

Execute different MudX projects locally using the 'dotnet run' command. This includes the documentation generator, the documentation site, and the unit test viewer.

```bash
dotnet run --project src/MudX.Docs/MudX.Docs.csproj
```

```bash
dotnet run --project src/MudX.Docs.Server/MudX.Docs.Server.csproj
```

```bash
dotnet run --project tests/MudX.UnitTests.Viewer/MudX.UnitTests.Viewer.csproj
```

--------------------------------

### MudXCodeBlock Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-codeblock.md

Initializes a new instance of the MudXCodeBlock component.

```csharp
public MudXCodeBlock()
```

--------------------------------

### Register ParameterState with MudXComponent

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/OVERVIEW.md

Demonstrates how to register a ParameterState<T> within a MudX component's constructor. Ensure the component implements IDisposable and uses a registration scope.

```csharp
private readonly ParameterState<T> _parameterState;

public MudXComponent()
{
    using var registerScope = CreateRegisterScope();
    _parameterState = registerScope.RegisterParameter<T>(nameof(Parameter))
        .WithParameter(() => Parameter)
        .WithEventCallback(() => ParameterChanged)
        .WithChangeHandler(HandleParameterChanged);
}
```

--------------------------------

### MudXSplitter Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-splitter.md

Initializes a new instance of the MudXSplitter component.

```csharp
public MudXSplitter()
```

--------------------------------

### C#-only Builds

Source: https://github.com/mudxtra/mudx/blob/dev/AGENTS.md

Perform C#-only builds by setting the SkipBunCompile property to true. This is useful for skipping JavaScript and SCSS compilation, but should be avoided for styling or JS changes.

```bash
dotnet build <project.csproj> /p:SkipBunCompile=true --nologo
```

--------------------------------

### AssemblyInfo.PackageId and AssemblyInfo.ModulePath

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/types.md

Provides access to assembly metadata, including the package ID for resource loading and a method to construct qualified paths for JavaScript modules.

```APIDOC
## AssemblyInfo

### Description
Provides static access to assembly information, such as the package identifier and utility for generating module paths for JavaScript interop.

### Properties
- **PackageId** (string): The package identifier used for loading resources (e.g., "MudX.MudBlazor.Extension").

### Methods
- **ModulePath(string moduleName)**: Returns the qualified path for a given JavaScript module name.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **PackageId**: string
- **ModulePath**: string

#### Response Example
```json
{
  "example": {
    "PackageId": "MudX.MudBlazor.Extension",
    "ModulePath": "/path/to/module.js"
  }
}
```
```

--------------------------------

### MudXSecurityCode Component Parameters

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

This section details the various parameters available for configuring the MudXSecurityCode component, including pattern definition, placeholder characters, masking, spacing, layout, and input variants.

```APIDOC
## MudXSecurityCode Component Parameters

### Parameters

| Parameter | Type | Default | Required | Description |
|-----------|------|---------|----------|-------------|
| Pattern | `string` | `"####"` | No | Input pattern using placeholder characters |
| PlaceholderNumeric | `char` | `'#'` | No | Character representing numeric digit placeholder |
| PlaceholderAlpha | `char` | `'A'` | No | Character representing alphabetic character placeholder |
| PlaceholderAlphaNumeric | `char` | `'?'` | No | Character representing alphanumeric character placeholder |
| PlaceholderSpecial | `char` | `'@'` | No | Character representing special symbol placeholder |
| PlaceholderAny | `char` | `'*'` | No | Character representing any UTF-8 character placeholder |
| Code | `string?` | `null` | No | Current code value (two-way binding) |
| CodeChanged | `EventCallback<string?>` | — | No | Event raised when code changes |
| Password | `bool` | `false` | No | Mask input like password field |
| Spacing | `int` | `2` | No | Gap between items in 4px increments (0-20) |
| Horizontal | `bool` | `true` | No | Display items horizontally (true) or vertically (false) |
| Variant | `Variant` | `Variant.Outlined` | No | Input variant (Outlined, Text, Filled) |
| ReadOnlyVariant | `Variant` | `Variant.Text` | No | Variant when component is readonly |
| Underline | `bool` | `true` | No | Show underline on inputs |
| Margin | `Margin` | `Margin.Normal` | No | Input margin (Normal or Dense) |
```

--------------------------------

### MudXChatFooter Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-chat.md

Shows the default constructor for the MudXChatFooter component.

```csharp
public MudXChatFooter()
```

--------------------------------

### Build Dynamic CSS Classes with CssBuilder

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/OVERVIEW.md

Shows how to use CssBuilder to dynamically construct CSS class strings for a component. This is useful for applying conditional styling based on component properties.

```csharp
protected string Classname => new CssBuilder("base-class")
    .AddClass($"variant-{Variant}")
    .AddClass("dense", Dense)
    .AddClass(Class)
    .Build();
```

--------------------------------

### MudXOutline with Header and Footer

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-outline.md

Use MudXOutline to create a navigation outline with custom header and footer content. The header can display titles or links, and the footer can contain actions like a 'More' button.

```csharp
<MudXOutline>
    <HeaderIndexContent>
        <MudText Typo="Typo.body2">Quick Links</MudText>
    </HeaderIndexContent>

    <ChildContent>
        <!-- Main content -->
    </ChildContent>

    <FooterIndexContent>
        <MudButton Size="Size.Small">More</MudButton>
    </FooterIndexContent>
</MudXOutline>
```

--------------------------------

### Use MudXProvider with other MudBlazor Providers

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/configuration.md

When using MudXProvider, you can also include other MudBlazor providers like MudThemeProvider, MudDialogProvider, and MudSnackbarProvider in your root layout. MudXProvider automatically includes necessary resources.

```html
<MudThemeProvider />
<MudXProvider />  @* Includes all necessary resources *@
<MudDialogProvider />
<MudSnackbarProvider />
```

--------------------------------

### MudXChatHeader Constructor

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-chat.md

Shows the default constructor for the MudXChatHeader component.

```csharp
public MudXChatHeader()
```

--------------------------------

### MudXSecurityCode Component Methods

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-securitycode.md

Details the methods available for interacting with the MudXSecurityCode component, including handling clipboard paste events and asynchronous disposal of resources.

```APIDOC
## Methods

| Method | Return Type | Parameters | Description |
|--------|-------------|-----------|-------------|
| ClipboardPasteEvent | `Task` | `fullid: string`, `text: string` | JSInvokable method handling clipboard paste events |
| DisposeAsync | `ValueTask` | — | Clean up resources and dispose the component |
```

--------------------------------

### Custom Drag Handle for Sheet

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-sheet.md

Shows how to implement a custom drag handle for the sheet using the `SheetHandleFragment`. This allows for custom UI elements to control sheet interactions like toggling size.

```csharp
<MudXSheet @bind-Open="isOpen">
    <SheetHandleFragment>
        <MudIconButton Icon="@Icons.Material.Filled.Menu"
                       Class="mud-sheet-handle-button"
                       OnClick="@(async () => await sheet.ToggleSizeAsync())" />
    </SheetHandleFragment>

    <ChildContent>
        <!-- Main content -->
    </ChildContent>
</MudXSheet>
```

--------------------------------

### Nested MudXSplitters (Horizontal and Vertical)

Source: https://github.com/mudxtra/mudx/blob/dev/_autodocs/api-reference/mudx-splitter.md

Demonstrates nesting MudXSplitter components to create complex layouts with both horizontal and vertical divisions.

```html
<MudXSplitter Direction="SplitterDirection.Horizontal" StartSize="30">
    <StartSplitter>
        <!-- Left side content -->
    </StartSplitter>
    <EndSplitter>
        <MudXSplitter Direction="SplitterDirection.Vertical" StartSize="50">
            <StartSplitter>Top-right content</StartSplitter>
            <EndSplitter>Bottom-right content</EndSplitter>
        </MudXSplitter>
    </EndSplitter>
</MudXSplitter>
```