Harmony.Desktop.UI (0.4.0)

Published 2026-08-10 14:59:09 +00:00 by antoine

Set up this registry from the command line:

dotnet nuget add source --name antoine --username your_username --password your_token https://git.luxit.be/api/packages/antoine/nuget/index.json

To install the package using NuGet, run the following command:

dotnet add package --source antoine --version 0.4.0 Harmony.Desktop.UI

For more information on the NuGet registry, see the documentation.

Harmony desktop UI library — Blazor Server component library: app shell (collapsible sidebar, topbar, command palette), data table, dialogs, forms, toasts, and a Tailwind 4 theme preset that shares its design tokens with Harmony.Mobile.UI so both surfaces read as one product.

Harmony.Desktop.UI

Blazor Server component library for the Harmony web desktop client. Provides the app shell (collapsible sidebar, topbar, command palette), data-dense primitives (table, dialog, menu, toast, form controls) and a Tailwind 4 theme preset.

This is the desktop counterpart of Harmony.Mobile.UI. The two libraries deliberately share their colour palette and light/dark variables verbatim so the phone and the desktop read as one product — see the note on token drift below.

Relationship to Harmony.Mobile.UI

	`Harmony.Mobile.UI`	`Harmony.Desktop.UI`
Target	Blazor WebAssembly (PWA / MAUI Hybrid)	Blazor Server
Prefix	`Hm*`	`Hd*`
Shell	Sticky header + bottom tab bar + sheets	Sidebar + topbar + dialogs
Interaction	Touch, haptics, swipe	Pointer, hover, keyboard, focus rings
`Components.Web` reference	`PrivateAssets="All"` (protects WASM consumers)	normal reference

Shared verbatim: the iOS colour palette, the .theme-light / .theme-dark / .pref-* class contract, and the muted-colour and reduce-motion preferences. A user's stored appearance preference therefore transfers between the two clients without translation.

Deliberately not shared: spacing rhythm, motion durations (desktop is faster), elevation scale (desktop stacks popovers over dropdowns over dialogs), and anything safe-area related.

Installation

<PackageReference Include="Harmony.Desktop.UI" Version="0.1.0" />

The package lives in the Gitea NuGet registry. Configure the source in nuget.config at the consuming solution's root:

<add key="gitea-luxit" value="https://git.luxit.be/api/packages/antoine/nuget/index.json" />

with packageSourceCredentials supplying antoine + a Gitea access token (scopes read:package + write:package).

Styles

The package ships a pre-compiled CSS bundle containing Tailwind base, the theme, the components and every utility class the library's own components use:

<link rel="stylesheet" href="_content/Harmony.Desktop.UI/css/harmony-desktop-ui.css" />

If your app runs its own Tailwind build, import the sources instead and keep the bundle linked too:

@import "tailwindcss";
@import "../../_content/Harmony.Desktop.UI/styles-src/theme.css";
@import "../../_content/Harmony.Desktop.UI/styles-src/components.css";
@source "./**/*.razor";

Building

npm ci
npm run build:icons     # regenerates HdIcon.Paths.g.cs from lucide-static
./build-css.sh          # produces wwwroot/css/harmony-desktop-ui.css
dotnet build

HdIcon.Paths.g.cs is committed, so a plain dotnet build never needs Node.

Publishing a new version

source ~/.harmony/env.sh      # exports GITEA_USER / GITEA_TOKEN
./scripts/release.sh 0.1.1

release.sh bumps <Version>, rebuilds icons + CSS, packs, pushes .nupkg + .snupkg to Gitea, commits, tags v0.1.1 and pushes. It refuses to run on a dirty tree or without a token.

For dev-time iteration without publishing:

./scripts/pack-local.sh 0.1.1-dev1

Compatibility

.NET 9.0+
Blazor Server (the only tested target)
Blazor WebAssembly — not supported: the Microsoft.AspNetCore.Components.Web reference is not private here, so it drags the ASP.NET Core runtime pack into a WASM consumer's build.