@haruhimemoe/ui 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.11.0] - 2026-10-04
+
+### Added
+
+- `ContentNav` and `ContentLayout`: a content section's side navigation and page grid, a port of bb's docs sidebar and layout. `ContentNav` (client) takes `groups` (`ContentNavGroup[]`, each an optional `heading` and `ContentNavItem[]`) and an index link, marks the current page `aria-current="page"`, shows `navTitle ?? title` (clamped to two lines, the full title on the link's `title` attribute) and an optional `badge`. `ContentLayout` (server) lays the nav in a 14rem column beside the page from `lg` up, taking `nav` as an already-rendered slot so it stays section-agnostic (docs today, a blog section later). New types: `ContentNavItem`, `ContentNavGroup`, `ContentSearchItem`.
+- `searchContent`, `ContentSearch` and `ContentIndex`: a content section's search, a port of bb's docs search. `searchContent(items, query)` is pure: a blank query returns everything, otherwise every typed word must appear in an item's `title`, `navTitle`, `description`, `badge` or `keywords`, title-prefix matches first. `ContentSearch` (client) is a `TextInput` plus a polite live-region count ("12 pages.", "1 match.", "3 matches.", the unfiltered noun set by `countNoun`, default `["page", "pages"]`) over `ContentIndex`. `ContentIndex` (server) is the bare card grid, for a section with too few entries to search (`/legal`, a handful of guides).
+- `ContentPage` and `CopyMarkdownButton`: a content section's page. `ContentPage` (server) is `PageHeader` (`title`, `description` as its `lead`), a meta row with `lastUpdated` (a `<time dateTime>`) and, when `markdownHref` is set, `CopyMarkdownButton`, plus `actions`; optional `jsonLd` (one `Record<string, unknown>`, passed to `JsonLd`); then the body in `Prose`. `CopyMarkdownButton` (client) fetches `href` and copies the response body to the clipboard, reporting the result like `CopyButton`; any failure (the fetch, the response, or the clipboard) shows the same message and it never throws. Finished class strings (no `cx`), so `ContentPage` ships no tailwind-merge for it.
+- `BrandPage` and `BrandSwatch`: a product's `/brand` page, `<BrandPage {...brandPageData("pools")} />` with `@haruhimemoe/brand`'s data (typed structurally; ui doesn't depend on brand). Sections: Name, Logo (each file previewed on a dark or light tile, with a `download` link), Colors (`BrandSwatch`, click to copy the hex), Type (`fonts`, default Nunito), Do's and don'ts, osu!, Family (only with `familyHref`), Contact (`mailto:`), plus `slots.afterLogo`, `slots.afterColors` and `slots.end`. `BrandSwatch` (client) has finished class strings, so `BrandPage` ships no tailwind-merge. New types: `BrandPageProps`, `BrandPageAsset`, `BrandPageFont`, `BrandSwatchProps`.
+
+## [0.10.0] - 2026-10-04
+
+### Added
+
+- `PlayerCard`: osu!-web's user card from plain props (cover, avatar, country and team flags, supporter heart, username linking to the profile, an optional status row). It never fetches; apps pass a snapshot.
+
 ## [0.9.0] - 2026-10-03
 
 ### Added
@@ -138,7 +153,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - `className` on every component, and the extras passed to `buttonClasses` and `fieldClasses`, merge with tailwind-merge: a caller's class replaces a built-in one that sets the same property (`fieldClasses("w-auto")` drops `w-full`).
 - Shell: `SiteHeader` (brand slot, nav links as data with `aria-current`, actions slot), `NavLinks`, `SiteFooter` (link columns as data, fine print, the haruhime.moe wordmark and a GitHub link) and `PageShell` (skip link, header, main, footer).
 
-[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.9.0...HEAD
+[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.11.0...HEAD
+[0.11.0]: https://github.com/haruhimemoe/ui/compare/v0.10.0...v0.11.0
+[0.10.0]: https://github.com/haruhimemoe/ui/compare/v0.9.0...v0.10.0
 [0.9.0]: https://github.com/haruhimemoe/ui/compare/v0.8.0...v0.9.0
 [0.8.0]: https://github.com/haruhimemoe/ui/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/haruhimemoe/ui/compare/v0.6.0...v0.7.0

package/README.md

@@ -2,11 +2,11 @@
 
 # @haruhimemoe/ui
 
-React components for the haruhime.moe osu! tools on Next.js. It ships the osu!-web-style palette as a Tailwind 4 theme, plus buttons, links, badges, form fields and confirms, filter controls (toggle and choice chips, a two-thumb range slider, a filter panel), tables, osu! beatmap display pieces, a command palette (mod+k, with the defaults every tool shares) and the site header, footer, tabs, account menu and page frame. Most components are Server Components. The few that need the browser carry `"use client"` in their own files, so you import everything from one place.
+React components for the haruhime.moe osu! tools on Next.js. It ships the osu!-web-style palette as a Tailwind 4 theme, plus buttons, links, badges, form fields and confirms, filter controls (toggle and choice chips, a two-thumb range slider, a filter panel), tables, osu! beatmap display pieces and player cards, a command palette (mod+k, with the defaults every tool shares), content section tooling (nav, search, index and page), brand pages and the site header, footer, tabs, account menu and page frame. Most components are Server Components. The few that need the browser carry `"use client"` in their own files, so you import everything from one place.
 
 See every component in its states at [haruhime.moe/ui](https://www.haruhime.moe/ui). The page names the version it runs.
 
-This README describes version 0.9.0. Anything marked "since 0.9.0" is not in 0.8.0, anything marked "since 0.8.0" is not in 0.7.0, anything marked "since 0.7.0" is not in 0.6.0, anything marked "since 0.6.0" is not in 0.5.0, anything marked "since 0.5.0" is not in 0.4.0, anything marked "since 0.4.0" is not in 0.3.0, anything marked "since 0.3.0" is not in 0.2.0, and anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
+This README describes version 0.11.0. Anything marked "since 0.11.0" is not in 0.10.0, anything marked "since 0.10.0" is not in 0.9.0, anything marked "since 0.9.0" is not in 0.8.0, anything marked "since 0.8.0" is not in 0.7.0, anything marked "since 0.7.0" is not in 0.6.0, anything marked "since 0.6.0" is not in 0.5.0, anything marked "since 0.5.0" is not in 0.4.0, anything marked "since 0.4.0" is not in 0.3.0, anything marked "since 0.3.0" is not in 0.2.0, and anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
 
 ## Requirements
 
@@ -155,6 +155,7 @@ Import every component from `@haruhimemoe/ui`, in Server and Client Components a
 
 - **Client components:** `CopyButton`, `Chip`, `ChipGroup`, `RangeSlider` and `FilterPanel`, and since 0.4.0 `AsyncButton`, `InlineConfirm`, `Disclosure`, `ChoiceChips`, `RadioGroup`, `TypeToConfirm` and `HeaderMenu`, and since 0.5.0 `Tabs`, `VisibilitySelect` and `ReportDisclosure`, and since 0.8.0 `CommandPalette` and `CommandPaletteButton`. Each file starts with `"use client"`. They merge their classes with tailwind-merge in the browser, so a page that renders any of them loads tailwind-merge (about 9 KB gzipped), however its header renders.
 - **`SiteHeader` and `NavLinks`** are Server Components with a small client part (since 0.2.0; in 0.1.0 `NavLinks` is a client component). When a nav link can be the current page (a path such as `/packs`), a client list reads the path to set `aria-current`. With only external or text-only links, the nav renders on the server alone and nothing in it hydrates. Relative hrefs (`#main`) skip the client list too, but they render `next/link`, which hydrates.
+- **`ContentNav`** (since 0.11.0) reads the path to mark the current page, like `NavLinks`, but it always hydrates: its class strings are finished (no `cx`), so it ships no tailwind-merge to the browser. `CopyMarkdownButton` (since 0.11.0) is the same: finished classes, no tailwind-merge, even though `ContentPage` (a Server Component) renders it. `ContentLayout` and `ContentPage` are Server Components. `BrandSwatch` (since 0.11.0) is the same again: `BrandPage` is a Server Component and only its swatches hydrate, with no tailwind-merge.
 - **Everything else is server-safe:** no state, no effects, no browser APIs.
 
 A Server Component can't pass a function to a Client Component. So callback props (`onChange`, `onPressedChange`, `onClear`) have to come from your own `"use client"` file, like the filters example below. Props that are plain data (`CopyButton`'s `text`, `Chip`'s `pressed`) work from a Server Component. `Pagination` takes a function (`hrefFor`), but it is a Server Component itself, so that is fine anywhere. Its button mode (`onPageChange`) is a callback, so render that from a `"use client"` file.
@@ -717,6 +718,129 @@ schema.org structured data in a `<script type="application/ld+json">`. Every `<`
 | --- | --- | --- | --- |
 | `data` | `Record<string, unknown>` | required | The schema.org object. `@context` defaults to `https://schema.org`; set it in `data` to change it. |
 
+### Content
+
+Since 0.11.0. A content section's side navigation, page grid and search, ports of bb's docs sidebar, layout grid and search. `ui` has no next-kit or brand dependency: resolve your section's entries (a docs registry, a future blog) into these plain, structural types yourself.
+
+```ts
+type ContentNavItem = { href: string; title: string; navTitle?: string; badge?: string };
+type ContentNavGroup = { heading?: string; items: readonly ContentNavItem[] };
+```
+
+`ContentSearchItem` (`ContentNavItem & { description: string; keywords?: readonly string[] }`) is exported too, for `searchContent`, `ContentSearch` and `ContentIndex` below.
+
+#### `ContentNav` (client)
+
+The index link, then each group of links, the current page marked. A column from `lg` up; a "Contents" disclosure above it on phones. Finished class strings (no `cx`).
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `label` | `string` | required | The nav landmark's accessible name, on both the column and the phone disclosure. |
+| `indexHref` | `string` | required | Where the index link (the section's overview page) points. |
+| `indexLabel` | `string` | `"Overview"` | The index link's label. |
+| `groups` | `readonly ContentNavGroup[]` | required | Each group's heading (left out when `heading` is unset) and links. |
+
+A link's label is `navTitle ?? title`, in a `line-clamp-2` span so a long title wraps to two lines instead of overflowing the 14rem column; the link's `title` attribute always holds the full `title`. The current page's link gets `aria-current="page"`. A `badge` (e.g. a count) shows beside the label, in `font-mono`.
+
+#### `ContentLayout`
+
+The grid: `nav` in a 14rem column from `lg` up, the page beside it; one column on phones. A Server Component. `nav` takes an already-rendered node (usually a `<ContentNav>`), so this stays section-agnostic. Every native `<div>` prop; `className` merges last.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `nav` | `ReactNode` | required | The section's navigation, already rendered. |
+| `children` | `ReactNode` | required | The page, inside a `min-w-0` wrapper (so a long line inside it can still shrink and wrap). |
+
+#### `searchContent`
+
+`searchContent(items: readonly ContentSearchItem[], query: string): ContentSearchItem[]`. Pure and server-safe. A blank (or whitespace-only) query returns every item, in input order. Otherwise `query` is lowercased and split on spaces; an item matches when every word appears somewhere in its `title`, `navTitle`, `description`, `badge` or any `keywords`. Matching items whose `title` starts with the trimmed query come first; the rest keep their input order.
+
+#### `ContentSearch` (client)
+
+Port of bb's docs search. A `TextInput` (id `content-search`, `type="search"`), a polite live region with the result count, then `ContentIndex` over what `searchContent` found.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `items` | `readonly ContentSearchItem[]` | required | The section's entries. |
+| `label` | `string` | required | The field's label. |
+| `placeholder` | `string` | none | The field's placeholder. |
+| `countNoun` | `readonly [string, string]` | `["page", "pages"]` | Singular and plural noun for the unfiltered count ("12 pages."). A filtered count always reads "1 match." or "N matches." |
+
+#### `ContentIndex`
+
+The same card grid as `ContentSearch` (one link per item: title, badge, description), with no search field, for a section with too few entries to bother searching (`/legal`, a handful of guides). A Server Component.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `items` | `readonly ContentSearchItem[]` | required | The entries to list. |
+
+#### `ContentPage`
+
+Since 0.11.0. A content section's page: `PageHeader` (the title and the description as its lead), a meta row with when the page was last updated and a "Copy as Markdown" button, then the body in `Prose`. Optional JSON-LD. A Server Component.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `title` | `ReactNode` | required | The page's `<h1>`, passed to `PageHeader`. |
+| `description` | `ReactNode` | none | Passed to `PageHeader` as `lead`. |
+| `lastUpdated` | `string` | none | A `<time dateTime>`-ready string (an ISO date, say), shown next to `lastUpdatedLabel`. |
+| `lastUpdatedLabel` | `ReactNode` | `"Last updated"` | The label before the time. |
+| `markdownHref` | `string` | none | The page's raw Markdown source. When set, shows a `CopyMarkdownButton` for it. |
+| `jsonLd` | `Record<string, unknown>` | none | One schema.org object, passed to `JsonLd`. Use `ld.graph(...)` yourself for several nodes. |
+| `actions` | `ReactNode` | none | Extra buttons or links, shown alongside the time and the copy button. |
+| `children` | `ReactNode` | required | The page body, rendered inside `Prose`. |
+
+#### `CopyMarkdownButton` (client)
+
+Since 0.11.0. A button that fetches `href` and copies the response body to the clipboard, reporting the result in an `<output>` beside it, like `CopyButton`. Any failure (the fetch rejects, the response isn't ok, or the clipboard refuses) shows the same failure message; it never throws. Its own client file with finished class strings (no `cx`): `ContentPage` is a Server Component, and this keeps tailwind-merge out of the browser bundle it ships.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `href` | `string` | required | Fetched on click; the response's text is copied. |
+| `label` | `ReactNode` | `"Copy as Markdown"` | The button's text. |
+| `copiedLabel` | `ReactNode` | `"Copied"` | Shown after a copy works. |
+| `failedLabel` | `ReactNode` | `"Couldn't copy"` | Shown when the fetch, the response, or the clipboard fails. |
+
+### Brand
+
+#### `BrandPage`
+
+Since 0.11.0. A product's `/brand` page body. Pass it `@haruhimemoe/brand`'s data as is:
+
+```tsx
+import { brandPageData } from "@haruhimemoe/brand/products";
+import { BrandPage } from "@haruhimemoe/ui";
+
+<BrandPage {...brandPageData("pools")} />;
+```
+
+The props are typed structurally, so ui doesn't depend on brand. Sections, in order, each a `Card` with an `<h2>`: Name (name, tagline, how to write it, the site), Logo (each file previewed on a dark `b6` or light tile by `dark`, with a `download` link; non-image files get the link only), `slots.afterLogo`, Colors (a `BrandSwatch` per palette token), `slots.afterColors`, Type, Do's and don'ts, osu! ("Not affiliated with osu! or ppy. osu! is a trademark of ppy Pty Ltd."), Family ("Part of the haruhime.moe family.", linking `familyHref`; hidden when it's null, as on haruhime.moe itself), Contact (a `mailto:` link), `slots.end`. The headings and the osu! and family lines are the same on every haruhime brand page. A Server Component.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `name` | `string` | required | The name as the wordmark reads it. |
+| `mark` | `string` | required | The icon's letters (part of the data shape; not shown). |
+| `tagline` | `string` | required | The product's one-line description. |
+| `url` | `string` | required | The product's site, linked under Name. |
+| `writing` | `string` | required | How to write the name in running text. |
+| `dos`, `donts` | `readonly string[]` | required | The two lists. |
+| `palette` | `Record<string, string>` | required | Token to `"#rrggbb"`, one swatch each. |
+| `assets` | `readonly BrandPageAsset[]` | required | `{ label, href, dark }`: `dark: false` is an on-light variant, shown on a light tile. |
+| `contact` | `string` | required | The contact address. |
+| `familyHref` | `string \| null` | required | The family brand page, or null to hide the Family section. |
+| `fonts` | `readonly BrandPageFont[]` | Nunito, "Wordmarks and headings" | `{ name, usage }` under Type. |
+| `slots` | `{ afterLogo?, afterColors?, end?: ReactNode }` | none | Extra sections, for haruhime.moe's own page. |
+
+#### `BrandSwatch` (client)
+
+Since 0.11.0. One palette token: a button showing the color, the token and its hex. Clicking copies the hex and reports the result in an `<output>` beside it, like `CopyButton`. The color is set inline from the data (`style={{ backgroundColor }}`), so it doesn't follow `--hue`. Finished class strings, no tailwind-merge.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `token` | `string` | required | The token's name. |
+| `hex` | `string` | required | The color, shown and copied. |
+| `copiedLabel` | `ReactNode` | `"Copied"` | Shown after a copy works. |
+| `failedLabel` | `ReactNode` | `"Couldn't copy"` | Shown when the clipboard refuses. |
+
 ### Shell
 
 Links in the header and footer are data (type `SiteLinkItem`):
@@ -814,7 +938,7 @@ The page frame: a skip link, the header, `<main>` and the footer, with the foote
 
 ### osu!
 
-Since 0.4.0. Display pieces for beatmaps and mod pools. They take plain values (no osu! API types) and are Server Components.
+Since 0.4.0. Display pieces for beatmaps, mod pools and (since 0.10.0) players. They take plain values (no osu! API types) and are Server Components.
 
 #### `StarRating`
 
@@ -845,6 +969,42 @@ A mod pool slot's pill (`NM1`, `HD2`, `TB`), colored by the first two letters: N
 | --- | --- | --- | --- |
 | `mod` | `string` | required | The mod or slot label. |
 
+#### `PlayerCard`
+
+Since 0.10.0. osu!-web's user card (the 120px card from the friends list and user tooltips): the profile cover under a dark overlay, the 60px avatar, the country flag, the team flag and the supporter heart, the username, and an optional status row. The whole card links to the osu! profile. Every native `<div>` prop except `children`.
+
+It never fetches. Pass a snapshot you keep yourself (from one osu! API lookup, or typed by hand), so a page of cards costs no API calls and hits no rate limits. Leave `status` out for static data: the card draws no online or offline ring unless told to. Images are plain `<img>` tags (lazy; the avatar and flags are sized), so the app needs no `images.remotePatterns` for osu!'s hosts. A cover ending in `.gif` is hidden when the visitor asks for reduced motion.
+
+```tsx
+<PlayerCard
+  username="peppy"
+  userId={2}
+  countryCode="AU"
+  coverUrl="https://assets.ppy.sh/user-profile-covers/2/….jpeg"
+  team={{ name: "mom?", flagUrl: "https://assets.ppy.sh/teams/flag/1/….png" }}
+  supporter
+  statusText="osu!"
+/>
+```
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `username` | `string` | required | The name on the card. |
+| `userId` | `number` | none | The osu! id: the avatar comes from `https://a.ppy.sh/<id>` and the card links to `https://osu.ppy.sh/users/<id>`. |
+| `href` | `string \| null` | the profile | Replaces the link; `null` draws none. Without a link the name is plain text. A linked card outlines on hover and on keyboard focus. |
+| `avatarUrl` | `string` | from `userId` | Replaces the avatar. With neither, the name's first letter stands in. |
+| `coverUrl` | `string` | none | The cover behind the card. None leaves it plain `b4`. |
+| `countryCode` | `string` | none | ISO 3166-1 alpha-2. Draws osu!'s own flag (`osu.ppy.sh/assets/images/flags/<code points>.svg`); anything but two letters draws none. |
+| `countryName` | `string` | English name from `Intl` | The flag's alt text. |
+| `team` | `{ name, flagUrl }` | none | The team flag beside the country's, its alt text the team's name. |
+| `supporter` | `boolean` | `false` | Draws the supporter heart. |
+| `supporterLabel` | `string` | `"osu! supporter"` | What screen readers hear for the heart. |
+| `status` | `"online" \| "offline"` | none | Draws the status ring (lime online, dark offline). |
+| `statusText` | `ReactNode` | `"Online"`/`"Offline"` with a status | The bottom row's main line: a status, or anything short (a role). |
+| `statusNote` | `ReactNode` | none | A small line above it ("Last seen 29 days ago", "formerly RMarc"). |
+
+The bottom row is left out when there is no status, text or note; the card keeps its 120px height so cards line up in a grid. A card with a cover gets a `b5` overlay at 80%, enough for `c2` text at 12px to keep 4.5:1 over a white cover (axe can't check text over an image).
+
 ### MDX (server)
 
 Since 0.9.0. Three subpaths, so an app that never renders Markdown loads none of this: `@haruhimemoe/ui/mdx` (the React pieces: `mdxComponents`, `CodeBlock`, `Callout`), `@haruhimemoe/ui/remark` (plain functions, no React, for `@next/mdx` and `react-markdown`'s `remarkPlugins`), and `@haruhimemoe/ui/shiki` (opt-in code highlighting). The root `@haruhimemoe/ui` export is unchanged.

package/dist/components/brand/BrandPage.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @file src/components/brand/BrandPage.tsx
+ * @desc A product's `/brand` page body: name, logo files, colors, type, do's and don'ts, the
+ *       osu! line, the family link and the contact, each a `Card`. Takes plain data shaped like
+ *       `@haruhimemoe/brand`'s `brandPageData(...)` output (typed structurally here; ui doesn't
+ *       depend on brand), so an app writes `<BrandPage {...brandPageData("pools")} />`. A Server
+ *       Component; only `BrandSwatch` hydrates.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ReactNode } from "react";
+/** One downloadable brand file. */
+export type BrandPageAsset = {
+    /** The link's text. */
+    label: string;
+    /** The file's URL. */
+    href: string;
+    /** True for a file drawn for a dark background, false for its on-light variant. */
+    dark: boolean;
+};
+/** One typeface and what it's used for. */
+export type BrandPageFont = {
+    name: string;
+    usage: string;
+};
+/** `BrandPage`'s props: `brandPageData(...)`'s shape, plus optional fonts and slots. */
+export type BrandPageProps = {
+    name: string;
+    mark: string;
+    tagline: string;
+    url: string;
+    /** How to write the name in running text. */
+    writing: string;
+    dos: readonly string[];
+    donts: readonly string[];
+    /** Token to `"#rrggbb"`. */
+    palette: Record<string, string>;
+    assets: readonly BrandPageAsset[];
+    /** The contact address, linked with `mailto:`. */
+    contact: string;
+    /** The family brand page; null hides the Family section. */
+    familyHref: string | null;
+    /** Defaults to Nunito for wordmarks and headings. */
+    fonts?: readonly BrandPageFont[] | undefined;
+    /** Extra sections after Logo, after Colors, and at the end. */
+    slots?: {
+        afterLogo?: ReactNode;
+        afterColors?: ReactNode;
+        end?: ReactNode;
+    } | undefined;
+};
+/**
+ * @function BrandPage
+ * @param props {BrandPageProps} the product's brand data, optional fonts and slots
+ * @returns {JSX.Element} the brand page's sections, in order
+ */
+export declare function BrandPage({ name, tagline, url, writing, dos, donts, palette, assets, contact, familyHref, fonts, slots, }: BrandPageProps): import("react").JSX.Element;

package/dist/components/brand/BrandPage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "../basics/Card.js";
+import { linkClasses } from "../basics/linkStyles.js";
+import { BrandSwatch } from "./BrandSwatch.js";
+const DEFAULT_FONTS = [
+    { name: "Nunito", usage: "Wordmarks and headings" },
+];
+const LINK = linkClasses();
+const IMAGE = /\.(svg|png|jpe?g|webp)$/i;
+/**
+ * @function BrandPage
+ * @param props {BrandPageProps} the product's brand data, optional fonts and slots
+ * @returns {JSX.Element} the brand page's sections, in order
+ */
+export function BrandPage({ name, tagline, url, writing, dos, donts, palette, assets, contact, familyHref, fonts = DEFAULT_FONTS, slots, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { title: "Name", children: [_jsx("p", { className: "font-bold text-c1 text-xl", children: name }), _jsx("p", { children: tagline }), _jsx("p", { children: writing }), _jsx("p", { children: _jsx("a", { className: LINK, href: url, children: url }) })] }), _jsx(Card, { title: "Logo", children: _jsx("ul", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: assets.map((asset) => (_jsxs("li", { className: "flex flex-col gap-2", children: [IMAGE.test(asset.href) ? (_jsx("div", { className: `flex h-32 items-center justify-center rounded-md p-4 ${asset.dark ? "bg-b6" : "bg-c1"}`, children: _jsx("img", { src: asset.href, alt: asset.label, className: "max-h-full max-w-full" }) })) : null, _jsx("a", { className: LINK, href: asset.href, download: true, children: asset.label })] }, asset.href))) }) }), slots?.afterLogo, _jsx(Card, { title: "Colors", children: _jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: Object.entries(palette).map(([token, hex]) => (_jsx("li", { children: _jsx(BrandSwatch, { token: token, hex: hex }) }, token))) }) }), slots?.afterColors, _jsx(Card, { title: "Type", children: _jsx("ul", { className: "flex flex-col gap-1", children: fonts.map((font) => (_jsxs("li", { children: [_jsx("span", { className: "font-bold text-c1", children: font.name }), ": ", font.usage] }, font.name))) }) }), _jsx(Card, { title: "Do's and don'ts", children: _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-1 font-bold text-c1", children: "Do" }), _jsx("ul", { className: "list-disc pl-5", children: dos.map((item) => (_jsx("li", { children: item }, item))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-1 font-bold text-c1", children: "Don't" }), _jsx("ul", { className: "list-disc pl-5", children: donts.map((item) => (_jsx("li", { children: item }, item))) })] })] }) }), _jsx(Card, { title: "osu!", children: _jsx("p", { children: "Not affiliated with osu! or ppy. osu! is a trademark of ppy Pty Ltd." }) }), familyHref ? (_jsx(Card, { title: "Family", children: _jsx("a", { className: LINK, href: familyHref, children: "Part of the haruhime.moe family." }) })) : null, _jsx(Card, { title: "Contact", children: _jsx("a", { className: LINK, href: `mailto:${contact}`, children: contact }) }), slots?.end] }));
+}

package/dist/components/brand/BrandSwatch.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file src/components/brand/BrandSwatch.tsx
+ * @desc One palette token on a brand page: a button showing the color, its token and its hex,
+ *       that copies the hex to the clipboard and reports the result in an `<output>` beside it.
+ *       The color comes from the brand data through an inline `backgroundColor` (hue-independent,
+ *       like `StarRating`). Its own client file with finished class strings (no `cx`), so
+ *       `BrandPage`, the Server Component that renders it, ships no tailwind-merge.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ReactNode } from "react";
+/** `BrandSwatch`'s props. */
+export type BrandSwatchProps = {
+    /** The palette token's name ("h1", "b6"). */
+    token: string;
+    /** The token's color as `"#rrggbb"`; shown, painted and copied. */
+    hex: string;
+    /** Status after a successful copy. Defaults to "Copied". */
+    copiedLabel?: ReactNode | undefined;
+    /** Status when the clipboard refuses. Defaults to "Couldn't copy". */
+    failedLabel?: ReactNode | undefined;
+};
+/**
+ * @function BrandSwatch
+ * @param props {BrandSwatchProps} the token, its hex, and optional status text
+ * @returns {JSX.Element} the click-to-copy swatch button and its status `<output>`
+ */
+export declare function BrandSwatch({ token, hex, copiedLabel, failedLabel, }: BrandSwatchProps): import("react").JSX.Element;

package/dist/components/brand/BrandSwatch.js

@@ -0,0 +1,35 @@
+/**
+ * @file src/components/brand/BrandSwatch.tsx
+ * @desc One palette token on a brand page: a button showing the color, its token and its hex,
+ *       that copies the hex to the clipboard and reports the result in an `<output>` beside it.
+ *       The color comes from the brand data through an inline `backgroundColor` (hue-independent,
+ *       like `StarRating`). Its own client file with finished class strings (no `cx`), so
+ *       `BrandPage`, the Server Component that renders it, ships no tailwind-merge.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StatusOutput } from "../actions/StatusOutput.js";
+import { useLatestStatus } from "../actions/useLatestStatus.js";
+const BUTTON_CLASS_NAME = "flex w-full items-center gap-3 rounded-md bg-b5 p-2 text-left transition-colors hover:bg-b3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-h1";
+/**
+ * @function BrandSwatch
+ * @param props {BrandSwatchProps} the token, its hex, and optional status text
+ * @returns {JSX.Element} the click-to-copy swatch button and its status `<output>`
+ */
+export function BrandSwatch({ token, hex, copiedLabel = "Copied", failedLabel = "Couldn't copy", }) {
+    const { status, start, settle } = useLatestStatus();
+    const copy = async () => {
+        const run = start();
+        try {
+            await navigator.clipboard.writeText(hex);
+            settle(run, "copied");
+        }
+        catch {
+            settle(run, "failed");
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("button", { type: "button", className: BUTTON_CLASS_NAME, onClick: copy, children: [_jsx("span", { "aria-hidden": "true", className: "size-10 shrink-0 rounded-md border border-b2", style: { backgroundColor: hex } }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "font-bold text-c1", children: token }), _jsx("span", { className: "font-mono text-c3 text-sm", children: hex })] })] }), _jsx(StatusOutput, { run: status?.run ?? null, children: status?.result === "copied" ? copiedLabel : failedLabel })] }));
+}

package/dist/components/content/ContentIndex.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @file src/components/content/ContentIndex.tsx
+ * @desc A content section's card grid with no search: one link per entry, its title, badge and
+ *       description. For short sections (`/legal`, a handful of guides) where `ContentSearch`'s
+ *       field would be overkill. Server-safe: no directive, no state; `ContentSearch` renders
+ *       this for its own filtered list, so the card look lives in one place.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ContentSearchItem } from "./types.js";
+/** `ContentIndex`'s props. */
+export type ContentIndexProps = {
+    items: readonly ContentSearchItem[];
+};
+/**
+ * @function ContentIndex
+ * @param props {ContentIndexProps} the section's entries
+ * @returns {JSX.Element} a two-column card grid (one column on phones), each card the entry's
+ *          title, badge and description
+ */
+export declare function ContentIndex({ items }: ContentIndexProps): import("react").JSX.Element;

package/dist/components/content/ContentIndex.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/content/ContentIndex.tsx
+ * @desc A content section's card grid with no search: one link per entry, its title, badge and
+ *       description. For short sections (`/legal`, a handful of guides) where `ContentSearch`'s
+ *       field would be overkill. Server-safe: no directive, no state; `ContentSearch` renders
+ *       this for its own filtered list, so the card look lives in one place.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import Link from "next/link.js";
+/**
+ * @function ContentIndex
+ * @param props {ContentIndexProps} the section's entries
+ * @returns {JSX.Element} a two-column card grid (one column on phones), each card the entry's
+ *          title, badge and description
+ */
+export function ContentIndex({ items }) {
+    return (_jsx("ul", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: items.map((item) => (_jsx("li", { children: _jsxs(Link, { href: item.href, className: "flex h-full flex-col gap-1 rounded-md bg-b4 p-3 hover:bg-b3", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "font-bold text-c1", children: item.title }), item.badge ? _jsx("span", { className: "font-mono text-c4 text-xs", children: item.badge }) : null] }), _jsx("span", { className: "text-c3 text-sm", children: item.description })] }) }, item.href))) }));
+}

package/dist/components/content/ContentLayout.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/content/ContentLayout.tsx
+ * @desc A content section's page grid: the nav in a 14rem column from `lg` up, the page beside
+ *       it. Port of bb's docs layout grid (`bb.haruhime.moe/src/app/docs/layout.tsx`), generic
+ *       over what `nav` is so a docs section and a later blog section share it.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** Every native `<div>` prop (including `ref`), plus the nav slot. */
+export type ContentLayoutProps = Omit<ComponentProps<"div">, "children"> & {
+    /** Usually a `<ContentNav>`, already rendered by the caller. */
+    nav: ReactNode;
+    children: ReactNode;
+};
+/**
+ * @function ContentLayout
+ * @param props {ContentLayoutProps} the nav slot, the page as children, and native div props
+ * @returns {JSX.Element} a one-column grid on phones, a 14rem nav column beside the page from
+ *          `lg` up
+ */
+export declare function ContentLayout({ nav, children, className, ...props }: ContentLayoutProps): import("react").JSX.Element;

package/dist/components/content/ContentLayout.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+/**
+ * @function ContentLayout
+ * @param props {ContentLayoutProps} the nav slot, the page as children, and native div props
+ * @returns {JSX.Element} a one-column grid on phones, a 14rem nav column beside the page from
+ *          `lg` up
+ */
+export function ContentLayout({ nav, children, className, ...props }) {
+    return (_jsxs("div", { className: cx("grid grid-cols-1 gap-6 lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-10", className), ...props, children: [nav, _jsx("div", { className: "min-w-0", children: children })] }));
+}

package/dist/components/content/ContentNav.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file src/components/content/ContentNav.tsx
+ * @desc A content section's side navigation: an index link, then each group of links, the
+ *       current page marked. A column beside the page on wide screens; a phone disclosure above
+ *       it. Port of bb's docs sidebar (`bb.haruhime.moe/src/components/docs/DocsNav.tsx`), with
+ *       the index link and groups taken from props instead of a hardcoded "docs" shape, so a
+ *       docs section, and later a blog section, can both use it.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ContentNavGroup } from "./types.js";
+/** `ContentNav`'s props. */
+export type ContentNavProps = {
+    /** The nav landmark's accessible name, for both the column and the phone disclosure. */
+    label: string;
+    /** Where the index link (the section's overview page) points. */
+    indexHref: string;
+    /** The index link's label. Default `"Overview"`. */
+    indexLabel?: string;
+    groups: readonly ContentNavGroup[];
+};
+/**
+ * @function ContentNav
+ * @param props {ContentNavProps} the nav's accessible name, the index link, and the groups
+ *        beneath it
+ * @returns {JSX.Element} the navigation, as a column and as a phone disclosure
+ */
+export declare function ContentNav({ label, indexHref, indexLabel, groups }: ContentNavProps): import("react").JSX.Element;

package/dist/components/content/ContentNav.js

@@ -0,0 +1,32 @@
+/**
+ * @file src/components/content/ContentNav.tsx
+ * @desc A content section's side navigation: an index link, then each group of links, the
+ *       current page marked. A column beside the page on wide screens; a phone disclosure above
+ *       it. Port of bb's docs sidebar (`bb.haruhime.moe/src/components/docs/DocsNav.tsx`), with
+ *       the index link and groups taken from props instead of a hardcoded "docs" shape, so a
+ *       docs section, and later a blog section, can both use it.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link.js";
+import { usePathname } from "next/navigation.js";
+const LINK_CLASS_NAME = "flex items-baseline justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-b4 hover:text-c1 text-c3";
+const CURRENT_CLASS_NAME = "flex items-baseline justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-b4 hover:text-c1 bg-b4 font-bold text-c1";
+/**
+ * @function ContentNav
+ * @param props {ContentNavProps} the nav's accessible name, the index link, and the groups
+ *        beneath it
+ * @returns {JSX.Element} the navigation, as a column and as a phone disclosure
+ */
+export function ContentNav({ label, indexHref, indexLabel = "Overview", groups }) {
+    const path = usePathname();
+    const link = (item) => {
+        const current = path === item.href;
+        return (_jsx("li", { children: _jsxs(Link, { href: item.href, "aria-current": current ? "page" : undefined, title: item.title, className: current ? CURRENT_CLASS_NAME : LINK_CLASS_NAME, children: [_jsx("span", { className: "line-clamp-2 min-w-0 break-words", children: item.navTitle ?? item.title }), item.badge ? _jsx("span", { className: "font-mono text-c4 text-xs", children: item.badge }) : null] }) }, item.href));
+    };
+    const list = (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("ul", { children: link({ href: indexHref, title: indexLabel }) }), groups.map((group, index) => (_jsxs("div", { children: [group.heading ? (_jsx("p", { className: "mb-1 px-2 font-bold text-c4 text-xs uppercase tracking-wide", children: group.heading })) : null, _jsx("ul", { children: group.items.map((item) => link(item)) })] }, group.heading ?? index)))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { "aria-label": label, className: "hidden lg:block", children: _jsx("div", { className: "sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto pr-1", children: list }) }), _jsxs("details", { className: "rounded-md bg-b4 p-2 lg:hidden", children: [_jsx("summary", { className: "cursor-pointer px-2 py-1 font-bold text-c2 text-sm", children: "Contents" }), _jsx("nav", { "aria-label": label, className: "mt-2", children: list })] })] }));
+}

package/dist/components/content/ContentPage.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @file src/components/content/ContentPage.tsx
+ * @desc A content section's page: the `PageHeader` (title, description as its lead), a meta row
+ *       with when the page was last updated and a "Copy as Markdown" button, and the body in
+ *       `Prose`. Optional JSON-LD structured data. Server-safe: no state, no browser APIs. A
+ *       caller resolves its own entries into these props (a docs page today, a blog post later),
+ *       the way `ContentNav` and `ContentLayout` do.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ReactNode } from "react";
+/** `ContentPage`'s props. */
+export type ContentPageProps = {
+    /** The page's h1. */
+    title: ReactNode;
+    /** A sentence under the title, passed to `PageHeader` as its `lead`. */
+    description?: ReactNode | undefined;
+    /** When the page was last updated, as a `<time dateTime>`-ready string (e.g. an ISO date). */
+    lastUpdated?: string | undefined;
+    /** The label before the last-updated time. Defaults to "Last updated". */
+    lastUpdatedLabel?: ReactNode | undefined;
+    /** The page's raw Markdown source. When set, shows a "Copy as Markdown" button that fetches it. */
+    markdownHref?: string | undefined;
+    /** A schema.org object for `JsonLd`. Pass `ld.graph(...)` yourself for several nodes. */
+    jsonLd?: Record<string, unknown> | undefined;
+    /** Extra buttons or links, shown alongside the last-updated time and the copy button. */
+    actions?: ReactNode | undefined;
+    /** The page body, rendered inside `Prose`. */
+    children: ReactNode;
+};
+/**
+ * @function ContentPage
+ * @param props {ContentPageProps} the title and optional description, last-updated time, Markdown
+ *        source, JSON-LD data and actions, plus the page body as children
+ * @returns {JSX.Element} optional `JsonLd`, a `PageHeader` whose actions hold the last-updated
+ *          time, the copy button and the caller's actions, then the body in `Prose`
+ */
+export declare function ContentPage({ title, description, lastUpdated, lastUpdatedLabel, markdownHref, jsonLd, actions, children, }: ContentPageProps): import("react").JSX.Element;

package/dist/components/content/ContentPage.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageHeader } from "../basics/PageHeader.js";
+import { Prose } from "../basics/Prose.js";
+import { JsonLd } from "../meta/JsonLd.js";
+import { CopyMarkdownButton } from "./CopyMarkdownButton.js";
+/**
+ * @function ContentPage
+ * @param props {ContentPageProps} the title and optional description, last-updated time, Markdown
+ *        source, JSON-LD data and actions, plus the page body as children
+ * @returns {JSX.Element} optional `JsonLd`, a `PageHeader` whose actions hold the last-updated
+ *          time, the copy button and the caller's actions, then the body in `Prose`
+ */
+export function ContentPage({ title, description, lastUpdated, lastUpdatedLabel = "Last updated", markdownHref, jsonLd, actions, children, }) {
+    const meta = lastUpdated || markdownHref || actions;
+    return (_jsxs(_Fragment, { children: [jsonLd ? _jsx(JsonLd, { data: jsonLd }) : null, _jsx(PageHeader, { title: title, lead: description, actions: meta ? (_jsxs(_Fragment, { children: [lastUpdated ? (_jsxs("div", { className: "text-c4 text-sm", children: [lastUpdatedLabel, " ", _jsx("time", { dateTime: lastUpdated, children: lastUpdated })] })) : null, markdownHref ? _jsx(CopyMarkdownButton, { href: markdownHref }) : null, actions] })) : undefined }), _jsx(Prose, { children: children })] }));
+}

package/dist/components/content/ContentSearch.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file src/components/content/ContentSearch.tsx
+ * @desc A content section's search: one field that narrows its entries as it's typed, with the
+ *       result count said to screen readers, then `ContentIndex`'s card grid over what matched.
+ *       Port of bb's docs search (`bb.haruhime.moe/src/components/docs/DocsSearch.tsx`), with the
+ *       entries, label and count noun taken from props instead of a hardcoded docs shape.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ContentSearchItem } from "./types.js";
+/** `ContentSearch`'s props. */
+export type ContentSearchProps = {
+    items: readonly ContentSearchItem[];
+    /** The field's label, and the search landmark's name read by nothing else here. */
+    label: string;
+    placeholder?: string;
+    /** Singular and plural noun for the unfiltered count ("12 pages."). Default `["page", "pages"]`. */
+    countNoun?: readonly [string, string];
+};
+/**
+ * @function ContentSearch
+ * @param props {ContentSearchProps} the section's entries, the field's label, an optional
+ *        placeholder, and an optional singular/plural noun for the unfiltered count
+ * @returns {JSX.Element} the field, the result count (a live region) and the matching entries
+ */
+export declare function ContentSearch({ items, label, placeholder, countNoun, }: ContentSearchProps): import("react").JSX.Element;

package/dist/components/content/ContentSearch.js

@@ -0,0 +1,32 @@
+/**
+ * @file src/components/content/ContentSearch.tsx
+ * @desc A content section's search: one field that narrows its entries as it's typed, with the
+ *       result count said to screen readers, then `ContentIndex`'s card grid over what matched.
+ *       Port of bb's docs search (`bb.haruhime.moe/src/components/docs/DocsSearch.tsx`), with the
+ *       entries, label and count noun taken from props instead of a hardcoded docs shape.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TextInput } from "../forms/TextInput.js";
+import { ContentIndex } from "./ContentIndex.js";
+import { searchContent } from "./searchContent.js";
+/**
+ * @function ContentSearch
+ * @param props {ContentSearchProps} the section's entries, the field's label, an optional
+ *        placeholder, and an optional singular/plural noun for the unfiltered count
+ * @returns {JSX.Element} the field, the result count (a live region) and the matching entries
+ */
+export function ContentSearch({ items, label, placeholder, countNoun = ["page", "pages"], }) {
+    const [query, setQuery] = useState("");
+    const found = searchContent(items, query);
+    const trimmed = query.trim();
+    const [singular, plural] = countNoun;
+    const countText = trimmed === ""
+        ? `${items.length} ${items.length === 1 ? singular : plural}.`
+        : `${found.length} ${found.length === 1 ? "match" : "matches"}.`;
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(TextInput, { id: "content-search", type: "search", label: label, placeholder: placeholder, value: query, onChange: (event) => setQuery(event.target.value), autoComplete: "off" }), _jsx("p", { className: "text-c3 text-sm", "aria-live": "polite", children: countText }), _jsx(ContentIndex, { items: found })] }));
+}

package/dist/components/content/CopyMarkdownButton.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @file src/components/content/CopyMarkdownButton.tsx
+ * @desc A button that fetches a page's raw Markdown and copies it to the clipboard, reporting the
+ *       result in an `<output>` beside it (a polite live region), for a doc page's "Copy as
+ *       Markdown" action. Any failure (the fetch rejects, the response isn't ok, or the clipboard
+ *       refuses) announces the same failure message; the button never throws. Its own client file
+ *       with finished class strings (no `cx`), so tailwind-merge stays out of the browser bundle
+ *       for `ContentPage`, the Server Component that renders it. Not a wrapper around
+ *       `CopyButton`, which imports `cx`.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ReactNode } from "react";
+/** `CopyMarkdownButton`'s props. */
+export type CopyMarkdownButtonProps = {
+    /** Fetched on click; the response body is copied to the clipboard. */
+    href: string;
+    /** The button's text. Defaults to "Copy as Markdown". */
+    label?: ReactNode | undefined;
+    /** Status after a successful copy. Defaults to "Copied". */
+    copiedLabel?: ReactNode | undefined;
+    /** Status when the fetch, the response, or the clipboard fails. Defaults to "Couldn't copy". */
+    failedLabel?: ReactNode | undefined;
+};
+/**
+ * @function CopyMarkdownButton
+ * @param props {CopyMarkdownButtonProps} the Markdown source's URL, plus optional label and
+ *        status text
+ * @returns {JSX.Element} the button and an `<output>` that announces the copy's result
+ */
+export declare function CopyMarkdownButton({ href, label, copiedLabel, failedLabel, }: CopyMarkdownButtonProps): import("react").JSX.Element;

package/dist/components/content/CopyMarkdownButton.js

@@ -0,0 +1,43 @@
+/**
+ * @file src/components/content/CopyMarkdownButton.tsx
+ * @desc A button that fetches a page's raw Markdown and copies it to the clipboard, reporting the
+ *       result in an `<output>` beside it (a polite live region), for a doc page's "Copy as
+ *       Markdown" action. Any failure (the fetch rejects, the response isn't ok, or the clipboard
+ *       refuses) announces the same failure message; the button never throws. Its own client file
+ *       with finished class strings (no `cx`), so tailwind-merge stays out of the browser bundle
+ *       for `ContentPage`, the Server Component that renders it. Not a wrapper around
+ *       `CopyButton`, which imports `cx`.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StatusOutput } from "../actions/StatusOutput.js";
+import { useLatestStatus } from "../actions/useLatestStatus.js";
+// buttonClasses({ variant: "secondary" }) copied as a literal, so this file imports no cx.
+const BUTTON_CLASS_NAME = "inline-flex items-center justify-center gap-2 rounded-full font-bold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-h1 disabled:cursor-not-allowed disabled:opacity-50 bg-b3 text-c1 not-disabled:hover:bg-b2 h-9 px-4 text-sm";
+/**
+ * @function CopyMarkdownButton
+ * @param props {CopyMarkdownButtonProps} the Markdown source's URL, plus optional label and
+ *        status text
+ * @returns {JSX.Element} the button and an `<output>` that announces the copy's result
+ */
+export function CopyMarkdownButton({ href, label = "Copy as Markdown", copiedLabel = "Copied", failedLabel = "Couldn't copy", }) {
+    const { status, start, settle } = useLatestStatus();
+    const copy = async () => {
+        const run = start();
+        try {
+            const response = await fetch(href);
+            if (!response.ok)
+                throw new Error(String(response.status));
+            const text = await response.text();
+            await navigator.clipboard.writeText(text);
+            settle(run, "copied");
+        }
+        catch {
+            settle(run, "failed");
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("button", { type: "button", className: BUTTON_CLASS_NAME, onClick: copy, children: label }), _jsx(StatusOutput, { run: status?.run ?? null, children: status?.result === "copied" ? copiedLabel : failedLabel })] }));
+}

package/dist/components/content/searchContent.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @file src/components/content/searchContent.ts
+ * @desc The search over a content section's entries: a blank query returns everything, otherwise
+ *       every typed word must appear somewhere in the entry (title, navTitle, description, badge
+ *       or any keyword). Pure and server-safe, so `ContentSearch` and a future server-rendered
+ *       index can both call it. Port of bb's `searchDocs` (`bb.haruhime.moe/src/utils/docs.ts`),
+ *       simplified to a plain AND match over one haystack per entry instead of per-word scoring.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ContentSearchItem } from "./types.js";
+/**
+ * @function searchContent
+ * @param items {readonly ContentSearchItem[]} the section's entries
+ * @param query {string} what was typed
+ * @returns {ContentSearchItem[]} every entry (in input order) when `query` is blank, otherwise
+ *          the entries where every lowercased, space-split word of `query` appears in the
+ *          entry's title, navTitle, description, badge or keywords; entries whose title starts
+ *          with the trimmed query come first, the rest keep their input order
+ */
+export declare function searchContent(items: readonly ContentSearchItem[], query: string): ContentSearchItem[];

package/dist/components/content/searchContent.js

@@ -0,0 +1,37 @@
+/**
+ * @file src/components/content/searchContent.ts
+ * @desc The search over a content section's entries: a blank query returns everything, otherwise
+ *       every typed word must appear somewhere in the entry (title, navTitle, description, badge
+ *       or any keyword). Pure and server-safe, so `ContentSearch` and a future server-rendered
+ *       index can both call it. Port of bb's `searchDocs` (`bb.haruhime.moe/src/utils/docs.ts`),
+ *       simplified to a plain AND match over one haystack per entry instead of per-word scoring.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+/** The text of an entry a query's words are matched against, lowercased. */
+const haystackOf = (item) => [item.title, item.navTitle, item.description, item.badge, ...(item.keywords ?? [])]
+    .filter((part) => Boolean(part))
+    .join(" ")
+    .toLowerCase();
+/**
+ * @function searchContent
+ * @param items {readonly ContentSearchItem[]} the section's entries
+ * @param query {string} what was typed
+ * @returns {ContentSearchItem[]} every entry (in input order) when `query` is blank, otherwise
+ *          the entries where every lowercased, space-split word of `query` appears in the
+ *          entry's title, navTitle, description, badge or keywords; entries whose title starts
+ *          with the trimmed query come first, the rest keep their input order
+ */
+export function searchContent(items, query) {
+    const trimmed = query.trim().toLowerCase();
+    if (trimmed === "")
+        return [...items];
+    const words = trimmed.split(/\s+/).filter(Boolean);
+    const matches = items.filter((item) => {
+        const haystack = haystackOf(item);
+        return words.every((word) => haystack.includes(word));
+    });
+    const isTitlePrefix = (item) => item.title.toLowerCase().startsWith(trimmed);
+    return [...matches.filter(isTitlePrefix), ...matches.filter((item) => !isTitlePrefix(item))];
+}

package/dist/components/content/types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @file src/components/content/types.ts
+ * @desc Content navigation's data: a link (`ContentNavItem`), a run of links under an optional
+ *       heading (`ContentNavGroup`), and a searchable item (`ContentSearchItem`, for task 7's
+ *       `ContentSearch`). Plain, server-safe types with no next-kit or brand import: a caller
+ *       resolves its own entries (a docs registry today, a blog section later) into these
+ *       shapes, so `ui` stays section-agnostic.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+/** One sidebar link: a resolved href, its full title, and an optional nav-length title. */
+export type ContentNavItem = {
+    href: string;
+    title: string;
+    /** Shown in the nav instead of `title`, for a long title. */
+    navTitle?: string;
+    /** A short tag beside the label, e.g. a count or "new". */
+    badge?: string;
+};
+/** A run of links under an optional heading. No `heading` renders no label above them. */
+export type ContentNavGroup = {
+    heading?: string;
+    items: readonly ContentNavItem[];
+};
+/** A `ContentNavItem` plus the text a fuzzy search matches against. */
+export type ContentSearchItem = ContentNavItem & {
+    description: string;
+    keywords?: readonly string[];
+};

package/dist/components/content/types.js

@@ -0,0 +1,12 @@
+/**
+ * @file src/components/content/types.ts
+ * @desc Content navigation's data: a link (`ContentNavItem`), a run of links under an optional
+ *       heading (`ContentNavGroup`), and a searchable item (`ContentSearchItem`, for task 7's
+ *       `ContentSearch`). Plain, server-safe types with no next-kit or brand import: a caller
+ *       resolves its own entries (a docs registry today, a blog section later) into these
+ *       shapes, so `ui` stays section-agnostic.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+export {};

package/dist/components/osu/PlayerCard.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @file src/components/osu/PlayerCard.tsx
+ * @desc osu!-web's user card (the 120px card from the friends list and user tooltips) from plain
+ *       props: cover under a b5 overlay, 60px avatar, country flag, team flag and supporter heart,
+ *       the username (the whole card links to the profile), and an optional status row. It never
+ *       fetches: the app passes a snapshot, so nothing here claims live data unless told to. The
+ *       online ring's lime is osu!'s own green-light, hue-independent like StarRating's spectrum.
+ *       Keyboard focus outlines the whole card in h1 as well as the username's own ring.
+ *       Plain `<img>`s, not next/image, so apps need no `images.remotePatterns` for osu!'s hosts.
+ *       Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** An osu! team: its name (the flag's alt text and tooltip) and its flag image. */
+export type PlayerTeam = {
+    /** The team's name. */
+    name: string;
+    /** The team flag's URL (osu! serves them from assets.ppy.sh). */
+    flagUrl: string;
+};
+/** Every native `<div>` prop except children, plus the player's snapshot. */
+export type PlayerCardProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The name shown on the card, as-is. */
+    username: string;
+    /** The osu! user id: the avatar comes from a.ppy.sh and the card links to the profile. */
+    userId?: number | undefined;
+    /** Replaces the profile link; `null` draws no link even with a `userId`. */
+    href?: string | null | undefined;
+    /** Replaces the a.ppy.sh avatar. Without it and a `userId`, a letter stands in. */
+    avatarUrl?: string | undefined;
+    /** The profile cover, drawn behind everything. None leaves the card plain b4. */
+    coverUrl?: string | undefined;
+    /** ISO 3166-1 alpha-2 code; draws osu!'s flag. Anything else draws none. */
+    countryCode?: string | undefined;
+    /** The flag's alt text (default: the English name from Intl, else the code). */
+    countryName?: string | undefined;
+    /** The player's osu! team, drawn as its flag beside the country's. */
+    team?: PlayerTeam | undefined;
+    /** Draws the supporter heart. */
+    supporter?: boolean | undefined;
+    /** What screen readers hear for the heart (default "osu! supporter"). */
+    supporterLabel?: string | undefined;
+    /** Draws the status ring. Leave it out for static data: the card never guesses a status. */
+    status?: "online" | "offline" | undefined;
+    /** The bottom row's main line (default "Online" or "Offline" when `status` is set). */
+    statusText?: ReactNode;
+    /** A small line above it ("Last seen 29 days ago", "formerly RMarc"). */
+    statusNote?: ReactNode;
+};
+/**
+ * @function PlayerCard
+ * @param props {PlayerCardProps} the player's snapshot (name, id, cover, flags, supporter,
+ *        status) and native div props
+ * @returns {JSX.Element} a 120px osu!-web user card; the whole card links to the profile when it
+ *          has a link
+ */
+export declare function PlayerCard({ username, userId, href, avatarUrl, coverUrl, countryCode, countryName, team, supporter, supporterLabel, status, statusText, statusNote, className, ...props }: PlayerCardProps): import("react").JSX.Element;

package/dist/components/osu/PlayerCard.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+import { AutoLink } from "../basics/AutoLink.js";
+import { avatarUrl as defaultAvatarUrl, countryName as defaultCountryName, flagUrl, isAnimatedImage, normalizeCountryCode, profileUrl, } from "./playerLinks.js";
+/** The first letter or digit of a name, for the stand-in avatar. */
+function initialOf(name) {
+    return name.match(/[\p{L}\p{N}]/u)?.[0]?.toUpperCase() ?? "?";
+}
+/** Whether a status line has something to show: not null, undefined, a boolean or "". */
+function shown(node) {
+    return node != null && typeof node !== "boolean" && node !== "";
+}
+/** The supporter heart: osu!'s pink-circle badge with a white heart. */
+function SupporterHeart({ label }) {
+    return (_jsx("span", { role: "img", "aria-label": label, className: "inline-flex size-[26px] shrink-0 items-center justify-center rounded-full bg-h2 text-c1", children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", className: "size-3.5", fill: "currentColor", children: _jsx("path", { d: "M12 21s-7.5-4.6-10-9.3C.3 8.4 2.2 4.5 6 4.5c2.2 0 3.6 1.2 4.5 2.5l1.5 2 1.5-2c.9-1.3 2.3-2.5 4.5-2.5 3.8 0 5.7 3.9 4 7.2C19.5 16.4 12 21 12 21z" }) }) }));
+}
+/**
+ * @function PlayerCard
+ * @param props {PlayerCardProps} the player's snapshot (name, id, cover, flags, supporter,
+ *        status) and native div props
+ * @returns {JSX.Element} a 120px osu!-web user card; the whole card links to the profile when it
+ *          has a link
+ */
+export function PlayerCard({ username, userId, href, avatarUrl, coverUrl, countryCode, countryName, team, supporter = false, supporterLabel = "osu! supporter", status, statusText, statusNote, className, ...props }) {
+    const link = href === null ? null : (href ?? (userId === undefined ? null : profileUrl(userId)));
+    const avatar = avatarUrl ?? (userId === undefined ? null : defaultAvatarUrl(userId));
+    const code = normalizeCountryCode(countryCode);
+    const flag = flagUrl(countryCode);
+    const mainLine = shown(statusText)
+        ? statusText
+        : status === "online"
+            ? "Online"
+            : status
+                ? "Offline"
+                : null;
+    const note = shown(statusNote) ? statusNote : null;
+    const hasStatusRow = status !== undefined || mainLine !== null || note !== null;
+    return (_jsxs("div", { className: cx("relative isolate flex h-[120px] flex-col justify-between overflow-hidden rounded-[10px] bg-b4 text-c1", link &&
+            "hover:outline-2 hover:outline-c3 has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-h1", className), ...props, children: [coverUrl ? (_jsx("img", { src: coverUrl, alt: "", loading: "lazy", decoding: "async", className: cx("absolute inset-0 -z-10 size-full object-cover", isAnimatedImage(coverUrl) && "motion-reduce:hidden") })) : null, coverUrl ? _jsx("div", { "aria-hidden": "true", className: "absolute inset-0 -z-10 bg-b5/80" }) : null, _jsxs("div", { className: "flex gap-2.5 p-2.5", children: [avatar ? (_jsx("img", { src: avatar, alt: "", width: 60, height: 60, loading: "lazy", decoding: "async", className: "size-[60px] shrink-0 rounded-md bg-b4 object-cover" })) : (_jsx("span", { "aria-hidden": "true", className: "flex size-[60px] shrink-0 items-center justify-center rounded-md bg-b3 font-bold text-2xl text-c3", children: initialOf(username) })), _jsxs("div", { className: "grid min-w-0 flex-1 grid-rows-[26px_1fr]", children: [_jsxs("div", { className: "flex h-[26px] items-center gap-1.5", children: [flag && code ? (_jsx("img", { src: flag, alt: countryName ?? defaultCountryName(code), width: 36, height: 26, loading: "lazy", decoding: "async", className: "h-[26px] w-auto shrink-0" })) : null, team ? (_jsx("img", { src: team.flagUrl, alt: team.name, width: 52, height: 26, loading: "lazy", decoding: "async", className: "h-[26px] w-[52px] shrink-0 rounded-sm object-cover" })) : null, supporter ? _jsx(SupporterHeart, { label: supporterLabel }) : null] }), _jsx("div", { className: "flex min-w-0 items-center", children: link ? (_jsx(AutoLink, { href: link, className: "truncate font-semibold text-base text-c1 after:absolute after:inset-0", children: username })) : (_jsx("span", { className: "truncate font-semibold text-base", children: username })) })] })] }), hasStatusRow ? (_jsxs("div", { className: "flex items-center gap-2.5 px-2.5 pb-2.5", children: [_jsx("div", { className: "flex w-[60px] shrink-0 justify-center", children: status ? (_jsx("span", { "aria-hidden": "true", className: cx("size-[25px] rounded-full border-4", status === "online" ? "border-lime-400" : "border-b6") })) : null }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [note !== null ? _jsx("span", { className: "truncate text-c2 text-xs", children: note }) : null, mainLine !== null ? _jsx("span", { className: "truncate text-sm", children: mainLine }) : null] })] })) : null] }));
+}

package/dist/components/osu/playerLinks.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @file src/components/osu/playerLinks.ts
+ * @desc The osu! URLs and names PlayerCard builds from plain props: profile and avatar from a
+ *       user id, osu-web's own country flag SVG from a two-letter code, the country's English
+ *       name for the flag's alt text, and whether a cover is an animated GIF. Pure, server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+/**
+ * @function profileUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's osu! profile page
+ */
+export declare const profileUrl: (id: number) => string;
+/**
+ * @function avatarUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's current avatar on a.ppy.sh (osu! serves the default for none)
+ */
+export declare const avatarUrl: (id: number) => string;
+/**
+ * @function normalizeCountryCode
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code, any case, maybe padded
+ * @returns {string | null} the code in capitals, or null when it isn't two ASCII letters
+ */
+export declare function normalizeCountryCode(code: string | undefined): string | null;
+/**
+ * @function flagUrl
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code
+ * @returns {string | null} osu-web's flag SVG (named by the flag emoji's regional-indicator code
+ *          points, lowercase hex joined by "-"), or null for anything but two ASCII letters
+ */
+export declare function flagUrl(code: string | undefined): string | null;
+/**
+ * @function countryName
+ * @param code {string} an ISO 3166-1 alpha-2 code
+ * @returns {string} the region's English name from Intl, or the code in capitals when Intl
+ *          doesn't know it
+ */
+export declare function countryName(code: string): string;
+/**
+ * @function isAnimatedImage
+ * @param url {string} an image URL
+ * @returns {boolean} true when the path ends in .gif (before any query or hash)
+ */
+export declare const isAnimatedImage: (url: string) => boolean;

package/dist/components/osu/playerLinks.js

@@ -0,0 +1,65 @@
+/**
+ * @file src/components/osu/playerLinks.ts
+ * @desc The osu! URLs and names PlayerCard builds from plain props: profile and avatar from a
+ *       user id, osu-web's own country flag SVG from a two-letter code, the country's English
+ *       name for the flag's alt text, and whether a cover is an animated GIF. Pure, server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+const REGIONAL_INDICATOR_A = 0x1f1e6;
+/**
+ * @function profileUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's osu! profile page
+ */
+export const profileUrl = (id) => `https://osu.ppy.sh/users/${id}`;
+/**
+ * @function avatarUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's current avatar on a.ppy.sh (osu! serves the default for none)
+ */
+export const avatarUrl = (id) => `https://a.ppy.sh/${id}`;
+/**
+ * @function normalizeCountryCode
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code, any case, maybe padded
+ * @returns {string | null} the code in capitals, or null when it isn't two ASCII letters
+ */
+export function normalizeCountryCode(code) {
+    const upper = code?.trim().toUpperCase() ?? "";
+    return /^[A-Z]{2}$/.test(upper) ? upper : null;
+}
+/**
+ * @function flagUrl
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code
+ * @returns {string | null} osu-web's flag SVG (named by the flag emoji's regional-indicator code
+ *          points, lowercase hex joined by "-"), or null for anything but two ASCII letters
+ */
+export function flagUrl(code) {
+    const upper = normalizeCountryCode(code);
+    if (!upper)
+        return null;
+    const points = [...upper].map((letter) => (REGIONAL_INDICATOR_A + letter.charCodeAt(0) - 65).toString(16));
+    return `https://osu.ppy.sh/assets/images/flags/${points.join("-")}.svg`;
+}
+/**
+ * @function countryName
+ * @param code {string} an ISO 3166-1 alpha-2 code
+ * @returns {string} the region's English name from Intl, or the code in capitals when Intl
+ *          doesn't know it
+ */
+export function countryName(code) {
+    const upper = code.trim().toUpperCase();
+    try {
+        return new Intl.DisplayNames(["en"], { type: "region" }).of(upper) ?? upper;
+    }
+    catch {
+        return upper;
+    }
+}
+/**
+ * @function isAnimatedImage
+ * @param url {string} an image URL
+ * @returns {boolean} true when the path ends in .gif (before any query or hash)
+ */
+export const isAnimatedImage = (url) => /\.gif(?:[?#]|$)/i.test(url);

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  *       their own "use client" directive, so this barrel is safe to import from Server Components.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 export { AsyncButton, type AsyncButtonProps } from "./components/actions/AsyncButton.js";
 export { CopyButton, type CopyButtonProps } from "./components/actions/CopyButton.js";
@@ -25,6 +25,16 @@ export { Prose, type ProseProps } from "./components/basics/Prose.js";
 export { type TabItem, Tabs, type TabsProps } from "./components/basics/Tabs.js";
 export { TextLink, type TextLinkProps } from "./components/basics/TextLink.js";
 export { tabId, tabPanelId } from "./components/basics/tabIds.js";
+export { BrandPage, type BrandPageAsset, type BrandPageFont, type BrandPageProps, } from "./components/brand/BrandPage.js";
+export { BrandSwatch, type BrandSwatchProps } from "./components/brand/BrandSwatch.js";
+export { ContentIndex, type ContentIndexProps } from "./components/content/ContentIndex.js";
+export { ContentLayout, type ContentLayoutProps } from "./components/content/ContentLayout.js";
+export { ContentNav, type ContentNavProps } from "./components/content/ContentNav.js";
+export { ContentPage, type ContentPageProps } from "./components/content/ContentPage.js";
+export { ContentSearch, type ContentSearchProps } from "./components/content/ContentSearch.js";
+export { CopyMarkdownButton, type CopyMarkdownButtonProps, } from "./components/content/CopyMarkdownButton.js";
+export { searchContent } from "./components/content/searchContent.js";
+export type { ContentNavGroup, ContentNavItem, ContentSearchItem, } from "./components/content/types.js";
 export { Chip, type ChipProps } from "./components/filters/Chip.js";
 export { ChipGroup, type ChipGroupProps, type ChipOption } from "./components/filters/ChipGroup.js";
 export { type ChoiceChipOption, ChoiceChips, type ChoiceChipsProps, } from "./components/filters/ChoiceChips.js";
@@ -49,6 +59,7 @@ export { HaruhimeWordmarkLink, type HaruhimeWordmarkLinkProps, } from "./compone
 export { JsonLd, type JsonLdProps } from "./components/meta/JsonLd.js";
 export { type BeatmapStatKey, BeatmapStats, type BeatmapStatsProps, } from "./components/osu/BeatmapStats.js";
 export { ModBadge, type ModBadgeProps } from "./components/osu/ModBadge.js";
+export { PlayerCard, type PlayerCardProps, type PlayerTeam, } from "./components/osu/PlayerCard.js";
 export { StarRating, type StarRatingProps } from "./components/osu/StarRating.js";
 export { CommandPalette } from "./components/palette/CommandPalette.js";
 export { CommandPaletteButton, type CommandPaletteButtonProps, } from "./components/palette/CommandPaletteButton.js";

package/dist/index.js

@@ -5,7 +5,7 @@
  *       their own "use client" directive, so this barrel is safe to import from Server Components.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Sat Oct 3, 2026
+ * @modified Sun Oct 4, 2026
  */
 // Actions
 export { AsyncButton } from "./components/actions/AsyncButton.js";
@@ -26,6 +26,17 @@ export { Prose } from "./components/basics/Prose.js";
 export { Tabs } from "./components/basics/Tabs.js";
 export { TextLink } from "./components/basics/TextLink.js";
 export { tabId, tabPanelId } from "./components/basics/tabIds.js";
+// Brand
+export { BrandPage, } from "./components/brand/BrandPage.js";
+export { BrandSwatch } from "./components/brand/BrandSwatch.js";
+// Content
+export { ContentIndex } from "./components/content/ContentIndex.js";
+export { ContentLayout } from "./components/content/ContentLayout.js";
+export { ContentNav } from "./components/content/ContentNav.js";
+export { ContentPage } from "./components/content/ContentPage.js";
+export { ContentSearch } from "./components/content/ContentSearch.js";
+export { CopyMarkdownButton, } from "./components/content/CopyMarkdownButton.js";
+export { searchContent } from "./components/content/searchContent.js";
 // Filters
 export { Chip } from "./components/filters/Chip.js";
 export { ChipGroup } from "./components/filters/ChipGroup.js";
@@ -54,6 +65,7 @@ export { JsonLd } from "./components/meta/JsonLd.js";
 // osu!
 export { BeatmapStats, } from "./components/osu/BeatmapStats.js";
 export { ModBadge } from "./components/osu/ModBadge.js";
+export { PlayerCard, } from "./components/osu/PlayerCard.js";
 export { StarRating } from "./components/osu/StarRating.js";
 // Palette
 export { CommandPalette } from "./components/palette/CommandPalette.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haruhimemoe/ui",
-  "version": "0.9.0",
-  "description": "React components for the haruhime.moe osu! tools on Next.js: the osu!-web-style palette as a Tailwind theme, buttons, cards, form fields and confirms, filter controls, tables, osu! beatmap display pieces, a command palette and the site header and footer.",
+  "version": "0.11.0",
+  "description": "React components for the haruhime.moe osu! tools on Next.js: the osu!-web-style palette as a Tailwind theme, buttons, cards, form fields and confirms, filter controls, tables, osu! beatmap display pieces and player cards, a command palette, content section tooling, brand pages and the site header and footer.",
   "keywords": [
     "osu",
     "osu!",