@haruhimemoe/ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -6,6 +6,15 @@ 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
@@ -144,7 +153,8 @@ 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.10.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

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 and player cards, 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`):

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/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";

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";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haruhimemoe/ui",
-  "version": "0.10.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 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!",