### Install htmxRazor Live Templates via Copy Source: https://github.com/cwoodruff/htmxrazor/blob/main/jetbrains-plugin/README.md Copy the live template XML file to your JetBrains IDE's templates directory. Adjust the version number in the path to match your installed IDE version. Restart your IDE after copying. ```bash # macOS cp resources/liveTemplates/htmxRazor.xml ~/Library/Application\ Support/JetBrains/Rider2024.3/templates/ # Windows copy resources\liveTemplates\htmxRazor.xml %APPDATA%\JetBrains\Rider2024.3\templates\ # Linux cp resources/liveTemplates/htmxRazor.xml ~/.config/JetBrains/Rider2024.3/templates/ ``` -------------------------------- ### Build and Run htmxRazor Project Source: https://github.com/cwoodruff/htmxrazor/blob/main/README.md Commands to build the solution, run unit tests, start the demo site, and pack the library for NuGet. ```bash dotnet build ``` ```bash dotnet test ``` ```bash dotnet run --project htmxRazor.Demo ``` ```bash dotnet pack htmxRazor/htmxRazor.csproj --configuration Release ``` -------------------------------- ### Install htmxRazor Snippets Manually Source: https://github.com/cwoodruff/htmxrazor/blob/main/vscode-extension/README.md Install the htmxRazor VS Code extension manually by packaging and installing the .vsix file. ```bash cd vscode-extension npm install -g @vscode/vsce vsce package code --install-extension htmxrazor-snippets-2.0.0.vsix ``` -------------------------------- ### Install htmxRazor Package Source: https://github.com/cwoodruff/htmxrazor/blob/main/README.md Use the .NET CLI to add the htmxRazor package to your project. ```bash dotnet add package htmxRazor ``` -------------------------------- ### Pack and Install htmxRazor Template from NuGet Source: https://github.com/cwoodruff/htmxrazor/blob/main/README.md Packages the htmxRazor template into a NuGet file and then installs it locally. This method is suitable for testing or using the template as a package. ```bash dotnet pack templates/htmxRazor.Templates.csproj -o nupkg ``` ```bash dotnet new install nupkg/htmxRazor.Templates.1.3.0.nupkg ``` -------------------------------- ### Install htmxRazor Template Locally Source: https://github.com/cwoodruff/htmxrazor/blob/main/README.md Installs the htmxRazor project template from the local source directory. This is useful for development or when not using a published NuGet package. ```bash dotnet new install ./templates/htmxRazor.Template ``` -------------------------------- ### Basic Date Range Picker Example Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md Demonstrates a basic implementation of the date range picker with predefined presets and a placeholder. ```razor ``` -------------------------------- ### Run Manual Demo Smoke Test Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-07-radial-select.md Starts the demo application and navigates to the Radial Select page for manual verification of its features. ```bash dotnet run --project htmxRazor.Demo → /RadialSelect ``` -------------------------------- ### Datetime Picker Configuration Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/specs/2026-06-11-datetime-picker-family-design.md Configures a single datetime picker bound to 'StartsAt' with 30-minute steps and Monday as the start of the week. ```razor ``` -------------------------------- ### VS Code Snippet Example (rhx-button-htmx) Source: https://github.com/cwoodruff/htmxrazor/blob/main/CHANGELOG.md Example of a VS Code snippet for the `rhx-button-htmx` component, including tabstops for common attributes. ```html ${5:Click Me} ``` -------------------------------- ### Kanban Board Component Setup Source: https://github.com/cwoodruff/htmxrazor/blob/main/CHANGELOG.md Defines the structure for Kanban boards, columns, and cards using Tag Helpers. Supports drag and drop and optimistic UI updates. ```html Task 1 Task 2 Task 3 ``` -------------------------------- ### Date Picker Razor Page Setup Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md This is the Razor Page model setup for the Date Picker component demo. It includes page title, component details, and placeholders for example code. ```razor @page @model DatePickerModel @{ Layout = "_ComponentPage"; ViewData["Title"] = "Date Picker"; ViewData["ComponentName"] = "Date Picker"; ViewData["ComponentTag"] = "rhx-date-picker"; ViewData["ComponentDescription"] = "A text input with a popup calendar. The month grid is server-rendered; prev/next and the month/year label navigate via htmx. Day selection commits a hidden ISO value."; }

Examples

Basic

Preview Code 
@Model.BasicCode

Min / Max range

Preview Code 
@Model.MinMaxCode
@await Html.PartialAsync("_PropertyTable", Model.Properties)

Accessibility

  • Trigger uses aria-haspopup="dialog"/aria-expanded; the popup is role="dialog".
  • The grid uses role="grid" with gridcell days and roving tabindex; arrows move by day/week, PageUp/Down by month, Enter selects, Escape closes.
  • The hidden value is ISO yyyy-MM-dd for reliable model binding; the visible input shows the culture short date.
``` -------------------------------- ### Date Picker Basic Example Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Demonstrates the basic usage of the Date Picker component. Configure the name and placeholder text. The `rhx-week-start` attribute can be set to 'mon' or 'sun'. ```razor @Model.BasicCode ``` -------------------------------- ### JavaScript Initialization and Registration Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m3-datetime.md Example of how to register custom JavaScript components with the RHX framework. Ensure the `_rhx*Init` guard is used to prevent multiple initializations. ```javascript RHX.register(name, fn); // ... _rhx*Init(element); ``` -------------------------------- ### Package htmxRazor Live Templates as Plugin JAR Source: https://github.com/cwoodruff/htmxrazor/blob/main/jetbrains-plugin/README.md Package the live templates into a JetBrains plugin JAR file. This JAR can then be installed directly into your JetBrains IDE. ```bash cd jetbrains-plugin jar cf htmxrazor-livetemplates-2.0.0.jar -C resources . ``` -------------------------------- ### Create New Project from htmxRazor Template Source: https://github.com/cwoodruff/htmxrazor/blob/main/README.md Creates a new .NET project named 'YourProjectName' using the installed htmxRazor template. This sets up a basic project structure with htmxRazor pre-configured. ```bash dotnet new htmxrazor -n YourProjectName ``` -------------------------------- ### DatePickerTagHelper Methods Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Contains methods for parsing date strings, normalizing them to ISO format, and formatting them for display according to culture settings. Also includes logic for expanding week start day abbreviations. ```csharp private static DateOnly? ParseDate(string? s) => DateOnly.TryParseExact(s, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.None, out var d) ? d : null; ``` ```csharp private static string? NormalizeIso(string? raw) { if (string.IsNullOrWhiteSpace(raw)) return null; if (DateOnly.TryParse(raw, CultureInfo.CurrentCulture, DateTimeStyles.None, out var d) || DateOnly.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.None, out d)) return d.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture); return null; } ``` ```csharp private string DisplayText(DateOnly d) => string.IsNullOrEmpty(Format) ? d.ToString("d", CultureInfo.CurrentCulture) : d.ToString(Format, CultureInfo.CurrentCulture); ``` ```csharp private static string ExpandWeekStart(string s) => s.ToLowerInvariant() switch { "mon" or "monday" => "Monday", "sun" or "sunday" => "Sunday", "tue" or "tuesday" => "Tuesday", "wed" or "wednesday" => "Wednesday", "thu" or "thursday" => "Thursday", "fri" or "friday" => "Friday", "sat" or "saturday" => "Saturday", _ => "Monday", }; ``` -------------------------------- ### Build the Solution Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-07-radial-select.md Builds the entire solution, ensuring it succeeds with warnings treated as errors. ```bash dotnet build ``` -------------------------------- ### Clone and Build htmxRazor Source: https://github.com/cwoodruff/htmxrazor/blob/main/CONTRIBUTING.md Clone the repository, navigate into the directory, build the project, and run the demo site. ```bash git clone https://github.com/cwoodruff/htmxRazor.git cd htmxRazor dotnet build dotnet test dotnet run --project htmxRazor.Demo ``` -------------------------------- ### Build and Test Command for Demo Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m3-datetime.md This command builds the demo project and then uses curl to verify the presence of specific elements related to the datetime picker on the demo page. It helps ensure the component's core functionalities are rendered correctly. ```bash dotnet build htmxRazor.Demo && curl -s http://localhost:5215/Docs/Components/DateTimePicker | grep -o 'rhx-datetime-picker__times\|rhx-calendar__day\|data-rhx-dt-value\|data-rhx-dt-done' | sort | uniq -c ``` -------------------------------- ### Use htmxRazor Button Component Source: https://github.com/cwoodruff/htmxrazor/blob/main/README.md Example of using the rhx-button component with specified variant and size. ```html Save Changes ``` -------------------------------- ### Commit Message Conventions Source: https://github.com/cwoodruff/htmxrazor/blob/main/CONTRIBUTING.md Examples of clear, imperative commit messages for various types of changes. ```git Add combobox multi-select support Fix dialog focus trap on nested dialogs Update button loading state ARIA attributes ``` -------------------------------- ### DateRangePickerModel PageModel Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md Defines the PageModel for the Date Range Picker component, including its properties and basic code example. ```csharp using System.Collections.Generic; using Microsoft.AspNetCore.Mvc.RazorPages; using htmxRazor.Components.Navigation; using htmxRazor.Demo.Models; namespace htmxRazor.Demo.Pages.Docs.Components; public class DateRangePickerModel : PageModel { public List Properties { get; } public string BasicCode => ""; public DateRangePickerModel() { Properties = new() { new("rhx-start-name", "string", "-", "Form field name for the hidden start date (ISO yyyy-MM-dd)"), new("rhx-end-name", "string", "-", "Form field name for the hidden end date (ISO yyyy-MM-dd)"), new("rhx-start-value", "string", "-", "Initial start date (ISO yyyy-MM-dd)"), new("rhx-end-value", "string", "-", "Initial end date (ISO yyyy-MM-dd)"), new("rhx-presets", "string", "-", "Comma list: today, yesterday, last7, last30, thismonth, lastmonth"), new("rhx-min", "string", "-", "Earliest selectable date (ISO yyyy-MM-dd)"), new("rhx-max", "string", "-", "Latest selectable date (ISO yyyy-MM-dd)"), new("rhx-week-start", "string", "mon", "First day of the week: mon or sun"), new("rhx-format", "string", "-", ".NET date format for display (default: culture short date)"), new("rhx-size", "string", "medium", "small, medium, large"), new("rhx-disabled", "bool", "false", "Disable the control"), }; } public void OnGet() { ViewData["Breadcrumbs"] = new List { new("Home", "/"), new("Components", "/Docs/Components/DateRangePicker"), new("Date Range Picker"), }; } } ``` -------------------------------- ### Date Picker PageModel Definition Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Defines the PageModel for the Date Picker component, including its properties and basic/min/max code examples. ```csharp using System.Collections.Generic; using Microsoft.AspNetCore.Mvc.RazorPages; using htmxRazor.Components.Navigation; using htmxRazor.Demo.Models; namespace htmxRazor.Demo.Pages.Docs.Components; public class DatePickerModel : PageModel { public List Properties { get; } = new() { new("rhx-for", "ModelExpression", "-", "Binds DateOnly/DateTime for two-way model binding"), new("name", "string", "-", "Form field name for the hidden ISO (yyyy-MM-dd) value"), new("rhx-placeholder", "string", "-", "Placeholder for the text input"), new("rhx-min", "string", "-", "Earliest selectable date (ISO yyyy-MM-dd)"), new("rhx-max", "string", "-", "Latest selectable date (ISO yyyy-MM-dd)"), new("rhx-week-start", "string", "mon", "First day of the week: mon or sun"), new("rhx-format", "string", "-", ".NET format string for the visible display (default: culture short date)"), new("rhx-size", "string", "medium", "small, medium, large"), new("rhx-disabled", "bool", "false", "Disable the control"), }; public string BasicCode => ""; public string MinMaxCode => ""; public void OnGet() { ViewData["Breadcrumbs"] = new List { new("Home", "/"), new("Components", "/Docs/Components/DatePicker"), new("Date Picker"), }; } } ``` -------------------------------- ### Date Range Picker Razor View Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md The Razor view for the Date Range Picker component, including examples, property table, and accessibility notes. ```razor @page @model DateRangePickerModel @{ Layout = "_ComponentPage"; ViewData["Title"] = "Date Range Picker"; ViewData["ComponentName"] = "Date Range Picker"; ViewData["ComponentTag"] = "rhx-date-range-picker"; ViewData["ComponentDescription"] = "A two-date range picker: two side-by-side months with synced navigation, live in-range hover preview, and quick presets. Commits two hidden ISO yyyy-MM-dd values."; }

Examples

Basic with presets

Preview Code 
@Model.BasicCode
@await Html.PartialAsync("_PropertyTable", Model.Properties)

Accessibility

  • Trigger uses aria-haspopup="dialog"/aria-expanded; the popup is role="dialog" with two calendar grids.
  • Two hidden ISO yyyy-MM-dd inputs (start + end) for reliable model binding.
  • First day click sets the start; the second sets the end (auto-swapped if earlier); hovering previews the range; presets set both at once.
``` -------------------------------- ### ExpandWeekStart Method Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m3-datetime.md Normalizes various string representations of weekdays to their full English name, defaulting to Monday. ```csharp private static string ExpandWeekStart(string s) => s.ToLowerInvariant() switch { "mon" or "monday" => "Monday", "sun" or "sunday" => "Sunday", "tue" or "tuesday" => "Tuesday", "wed" or "wednesday" => "Wednesday", "thu" or "thursday" => "Thursday", "fri" or "friday" => "Friday", "sat" or "saturday" => "Saturday", _ => "Monday", }; ``` -------------------------------- ### Testing DatePickerTagHelper Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Commands to run tests and build the project to verify the functionality of the DatePickerTagHelper. ```bash dotnet test htmxRazor.Tests --filter DatePickerTagHelperTests ``` ```bash dotnet build htmxRazor && dotnet test htmxRazor.Tests ``` -------------------------------- ### Configure rhx-date-picker Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/specs/2026-06-11-datetime-picker-family-design.md Use rhx-date-picker for selecting dates. Configure minimum and maximum dates, and the start of the week. A hidden input stores the ISO date. ```razor ``` -------------------------------- ### Build Command Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Command to build the project and confirm JavaScript embedding. Expected to succeed. ```bash dotnet build htmxRazor ``` -------------------------------- ### Commit Git Changes for Date Range Picker CSS Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md Example of Git commands to stage and commit the CSS file for the date range picker component. ```bash git add htmxRazor/Assets/css/components/rhx-date-range-picker.css git commit -m "feat(date-range): stylesheet (dual-month layout, range highlight, presets)" ``` -------------------------------- ### Build and Test Verification Commands Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md Commands to verify the build, unit tests, and Playwright tests for the Date Range Picker functionality. ```bash dotnet build htmxRazor.sln ``` ```bash dotnet test htmxRazor.Tests ``` ```bash dotnet test PlaywrightTests --filter "FullyQualifiedName~DateRangePicker&DisplayName~chromium" ``` -------------------------------- ### Build and Test Date Range Picker Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md Build the htmxRazor demo application and test the Date Range Picker component using curl to verify its output. ```bash dotnet build htmxRazor.Demo curl -s http://localhost:5217/Docs/Components/DateRangePicker | grep -o 'data-rhx-range-cal\|data-rhx-range-start\|data-rhx-range-end\|data-range-preset\|rhx-calendar__day\|November 2026' | sort | uniq -c ``` -------------------------------- ### TimePicker.cshtml Razor Component Page Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m2-time-picker.md This Razor component defines the demo page for the Time Picker. It includes the layout, title, component details, and sections for examples and accessibility. ```razor @page @model TimePickerModel @{ Layout = "_ComponentPage"; ViewData["Title"] = "Time Picker"; ViewData["ComponentName"] = "Time Picker"; ViewData["ComponentTag"] = "rhx-time-picker"; ViewData["ComponentDescription"] = "A text input with a popup list of selectable times. Commits a hidden ISO HH:mm value; shows 12-hour or 24-hour display."; }

Examples

Basic

Preview Code 
@Model.BasicCode

Business hours, 15-min, 24-hour

Preview Code 
@Model.RangeCode
@await Html.PartialAsync("_PropertyTable", Model.Properties)

Accessibility

  • The input is a role="combobox" with aria-haspopup="listbox"/aria-expanded; the popup is role="listbox" with role="option" items.
  • Keyboard: Down/Up move, Home/End jump, Enter selects, Escape closes, printable keys type-ahead by label; the active option is tracked via aria-activedescendant.
  • The hidden value is ISO HH:mm (24-hour) for reliable model binding regardless of the display mode.
``` -------------------------------- ### DateRangePickerTagHelper Initialization and Configuration Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md Shows the constructor and the ProcessAsync method of the DateRangePickerTagHelper, which handles the rendering and attribute processing for the date range picker. ```csharp [HtmlAttributeNotBound] public DateOnly Today { get; set; } = DateOnly.FromDateTime(DateTime.Today); private static readonly Dictionary PresetLabels = new(StringComparer.OrdinalIgnoreCase) { ["today"] = "Today", ["yesterday"] = "Yesterday", ["last7"] = "Last 7 days", ["last30"] = "Last 30 days", ["thismonth"] = "This month", ["lastmonth"] = "Last month", }; public DateRangePickerTagHelper(IUrlHelperFactory urlHelperFactory) : base(urlHelperFactory) { } public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { await Task.CompletedTask; output.TagName = "div"; output.TagMode = TagMode.StartTagAndEndTag; var id = ResolveId(); if (string.IsNullOrEmpty(id)) id = "rhx-rp-" + context.UniqueId; var start = ParseDate(StartValue); var end = ParseDate(EndValue); var calId = $"{id}-cal"; var popupId = $"{id}-popup"; var inputId = $"{id}-input"; var labelId = $"{id}-label"; var hintId = $"{id}-hint"; var errorId = $"{id}-error"; var size = Size.ToLowerInvariant(); var hasError = HasError(); var css = CreateCssBuilder() .AddIf(GetModifierClass(size), size != "medium") .AddIf(GetModifierClass("disabled"), Disabled) .AddIf(GetModifierClass("readonly"), Readonly) .AddIf(GetModifierClass("error"), hasError); ApplyWrapperAttributes(output, css); output.Attributes.SetAttribute("data-rhx-date-range-picker", ""); output.Attributes.SetAttribute("data-range-start", start is { } s0 ? s0.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture) : ""); output.Attributes.SetAttribute("data-range-end", end is { } e0 ? e0.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture) : ""); var weekStart = Enum.TryParse(ExpandWeekStart(WeekStartName), true, out var ws) ? ws : DayOfWeek.Monday; var view = start ?? Today; var rangeOpts = new CalendarRangeOptions { Year = view.Year, Month = view.Month, Min = ParseDate(Min), Max = ParseDate(Max), WeekStart = weekStart, Today = Today, HxGetUrl = "/_rhx/calendar-range", TargetId = calId, Format = Format, }; var startDisp = start is { } sd ? sd.ToString(string.IsNullOrEmpty(Format) ? "d" : Format, CultureInfo.CurrentCulture) : ""; var endDisp = end is { } ed ? ed.ToString(string.IsNullOrEmpty(Format) ? "d" : Format, CultureInfo.CurrentCulture) : ""; var display = (start != null && end != null) ? $"{startDisp} – {endDisp}" : ""; var sb = new StringBuilder(); var labelText = ResolveLabelText(); if (!string.IsNullOrEmpty(labelText)) sb.Append($""); ``` -------------------------------- ### Run Playwright E2E Tests on Chromium Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Command to execute Playwright end-to-end tests specifically on the Chromium browser. Includes instructions for installing the browser if it's not already present. ```bash dotnet test PlaywrightTests --filter "FullyQualifiedName~DatePicker&DisplayName~chromium" npx -y playwright@1.60.0 install chromium ``` -------------------------------- ### Run Tests for TimePickerTagHelper Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m2-time-picker.md Command to run specific tests for the TimePickerTagHelper and the entire test suite. Ensures the build has no warnings. ```bash dotnet test htmxRazor.Tests --filter TimePickerTagHelperTests ``` ```bash dotnet test htmxRazor.Tests ``` ```bash dotnet build htmxRazor ``` -------------------------------- ### Date Picker Min/Max Range Example Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Shows how to set minimum and maximum date constraints for the Date Picker. Dates outside this range will be disabled. The format for `rhx-min` and `rhx-max` is 'yyyy-MM-dd'. ```razor @Model.MinMaxCode ``` -------------------------------- ### Test Months View Rendering Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-11-datetime-picker-m1-date-picker.md Verifies that the months view renders 12 month buttons with correct hx-get attributes for navigation to the days view and highlights the current month. ```csharp { var o = DaysOpts() with { View = CalendarView.Months }; var html = CalendarRenderer.Render(o); Assert.Equal(12, System.Text.RegularExpressions.Regex.Matches(html, "rhx-calendar__month-cell").Count); Assert.Contains(">Jan<", html); Assert.Contains(">Dec<", html); // Clicking a month navigates to that month's days view. Assert.Contains("hx-get=\"/_rhx/calendar?view=days&year=2026&month=10", html); Assert.Contains("rhx-calendar__month-cell--selected", html); // current month (October) } ``` -------------------------------- ### Configure htmxRazor Services Source: https://github.com/cwoodruff/htmxrazor/blob/main/README.md Configure the necessary services and middleware for htmxRazor in your application's startup file. ```csharp // Program.cs builder.Services.AddRazorPages(); builder.Services.AddhtmxRazor(); var app = builder.Build(); app.UseStaticFiles(); app.UsehtmxRazor(); // Serves component CSS, JS, and htmx from /_rhx/ app.MapRazorPages(); app.Run(); ``` -------------------------------- ### C# RadialSelectTagHelper Minimal Class Definition Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-07-radial-select.md Initial C# implementation of the `RadialSelectTagHelper` class, including its attributes, properties, constructor, and the start of the `ProcessAsync` method for rendering the component's basic structure. ```csharp using System.Text; using htmxRazor.Components.Imagery; using htmxRazor.Infrastructure; using Microsoft.AspNetCore.Mvc.Routing; using Microsoft.AspNetCore.Razor.TagHelpers; namespace htmxRazor.Components.Forms; /// /// Compound control: a rectangular trigger button flush-left against a dropdown. /// The trigger opens a circular SVG pie popup whose wedges (categories, each with a /// color + icon) drive the dropdown's option set via an htmx cascade. /// [HtmlTargetElement("rhx-radial-select")] [RestrictChildren("rhx-radial-option")] public sealed class RadialSelectTagHelper : FormControlTagHelperBase { protected override string BlockName => "radial-select"; /// Placeholder shown before any option is selected / when a category is empty. [HtmlAttributeName("rhx-placeholder")] public string? Placeholder { get; set; } /// Optional form field name for submitting the active category value. [HtmlAttributeName("rhx-category-name")] public string? CategoryName { get; set; } /// Optional rhx-value of the wedge to activate on initial render. [HtmlAttributeName("rhx-default-category")] public string? DefaultCategory { get; set; } // Ordered cycle for wedges that omit rhx-color. Only tokens that exist. private static readonly string[] ColorCycle = { "brand", "success", "warning", "danger", "neutral" }; private static readonly HashSet AllowedColors = new(ColorCycle, StringComparer.OrdinalIgnoreCase); public RadialSelectTagHelper(IUrlHelperFactory urlHelperFactory) : base(urlHelperFactory) { } public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { // ── Collect child wedges ── context.Items["RhxRadialOptions"] = new List(); await output.GetChildContentAsync(); var options = (List)context.Items["RhxRadialOptions"]; var resolvedName = ResolveName(); var resolvedId = ResolveId(); var resolvedValue = ResolveValue(); var size = Size.ToLowerInvariant(); var listboxId = $"{resolvedId}-listbox"; var pieId = $"{resolvedId}-pie"; // ── Resolve per-wedge colors (explicit or cycle) ── var colored = ResolveColors(options); // ── Wrapper ── output.TagName = "div"; output.TagMode = TagMode.StartTagAndEndTag; ``` -------------------------------- ### Event Listeners for Date Range Picker Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/plans/2026-06-12-datetime-picker-m4-date-range.md Sets up event listeners for user interactions including opening/closing the picker, selecting days, applying presets, and hover previews. Also includes handling for `htmx:afterSwap` to re-paint the calendar and closing the picker when clicking outside. ```javascript if (trigger) trigger.addEventListener("click", function () { isOpen() ? close() : open(); }); input.addEventListener("focus", function () { if (!isOpen()) open(); }); pupup.addEventListener("click", function (e) { var day = e.target.closest(DAY); if (day && popup.contains(day)) { pickDay(day); return; } var preset = e.target.closest("[data-range-preset]"); if (preset) applyPreset(preset.getAttribute("data-range-preset")); }); // Live hover preview while selecting. pupup.addEventListener("mouseover", function (e) { if (!selecting) return; var day = e.target.closest(DAY); if (day && popup.contains(day)) paint(day.getAttribute("data-date")); }); // Re-paint after an htmx month swap (the calendar widget is replaced). pupup.addEventListener("htmx:afterSwap", function () { paint(); }); document.addEventListener("click", function (e) { if (isOpen() && !rp.contains(e.target)) close(); }); ``` -------------------------------- ### Date Range Picker Configuration Source: https://github.com/cwoodruff/htmxrazor/blob/main/docs/superpowers/specs/2026-06-11-datetime-picker-family-design.md Sets up a date range picker with 'From' and 'To' inputs, a minimum date of January 1, 2026, Monday as the start of the week, and predefined range presets. ```razor ```