@haruhimemoe/ui 0.2.0 → 0.4.0

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

@@ -0,0 +1,36 @@
+/**
+ * @file src/components/osu/BeatmapStats.tsx
+ * @desc A beatmap's CS / AR / OD / HP / BPM / length as a compact description list (the packs
+ *       and pools map rows). Takes plain numbers, so it needs no osu! types; a stat left out or
+ *       not finite doesn't show. The short names are `<abbr>`s with the full name as a title.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** The stats BeatmapStats shows, in order. */
+export type BeatmapStatKey = "cs" | "ar" | "od" | "hp" | "bpm" | "length";
+/** Every native `<dl>` prop except children, plus the numbers and optional labels. */
+export type BeatmapStatsProps = Omit<ComponentProps<"dl">, "children"> & {
+    /** Circle size. */
+    cs?: number | null | undefined;
+    /** Approach rate. */
+    ar?: number | null | undefined;
+    /** Overall difficulty. */
+    od?: number | null | undefined;
+    /** HP drain. */
+    hp?: number | null | undefined;
+    /** Beats per minute, shown whole. */
+    bpm?: number | null | undefined;
+    /** Drain length in seconds, shown as m:ss (h:mm:ss from an hour). */
+    lengthSeconds?: number | null | undefined;
+    /** Replaces a stat's label (to translate it, say). */
+    labels?: Partial<Record<BeatmapStatKey, ReactNode>> | undefined;
+};
+/**
+ * @function BeatmapStats
+ * @param props {BeatmapStatsProps} the stats as numbers, optional labels, and native dl props
+ * @returns {JSX.Element} a wrapping `<dl>` of label and value pairs, in CS, AR, OD, HP, BPM,
+ *          length order
+ */
+export declare function BeatmapStats({ cs, ar, od, hp, bpm, lengthSeconds, labels, className, ...props }: BeatmapStatsProps): import("react").JSX.Element;

package/dist/components/osu/BeatmapStats.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+const abbr = (short, full) => _jsx("abbr", { title: full, children: short });
+const LABELS = {
+    cs: abbr("CS", "Circle size"),
+    ar: abbr("AR", "Approach rate"),
+    od: abbr("OD", "Overall difficulty"),
+    hp: abbr("HP", "HP drain"),
+    bpm: abbr("BPM", "Beats per minute"),
+    length: "Length",
+};
+const pad = (n) => String(n).padStart(2, "0");
+/**
+ * @function formatLength
+ * @param seconds {number} a length in seconds
+ * @returns {string} "m:ss", or "h:mm:ss" from an hour up
+ */
+const formatLength = (seconds) => {
+    const total = Math.round(seconds);
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    return hours > 0
+        ? `${hours}:${pad(minutes)}:${pad(total % 60)}`
+        : `${minutes}:${pad(total % 60)}`;
+};
+// One decimal at most, with float noise gone (9.300000001 is 9.3).
+const stat = (n) => String(Math.round(n * 10) / 10);
+/**
+ * @function BeatmapStats
+ * @param props {BeatmapStatsProps} the stats as numbers, optional labels, and native dl props
+ * @returns {JSX.Element} a wrapping `<dl>` of label and value pairs, in CS, AR, OD, HP, BPM,
+ *          length order
+ */
+export function BeatmapStats({ cs, ar, od, hp, bpm, lengthSeconds, labels, className, ...props }) {
+    const values = [
+        ["cs", cs, stat],
+        ["ar", ar, stat],
+        ["od", od, stat],
+        ["hp", hp, stat],
+        ["bpm", bpm, (n) => String(Math.round(n))],
+        ["length", lengthSeconds, formatLength],
+    ];
+    return (_jsx("dl", { className: cx("flex flex-wrap gap-x-3 gap-y-1 text-xs", className), ...props, children: values.map(([key, value, format]) => typeof value === "number" && Number.isFinite(value) ? (_jsxs("div", { className: "flex gap-1", children: [_jsx("dt", { className: "text-c4", children: labels?.[key] ?? LABELS[key] }), _jsx("dd", { className: "font-bold text-c1 tabular-nums", children: format(value) })] }, key)) : null) }));
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/osu/ModBadge.tsx
+ * @desc A mod pool slot's pill (NM1, HD2, TB), colored by its mod bucket the way tournament
+ *       sheets and packs.haruhime.moe color them: NM sky, HD amber, HR rose, DT and NC violet,
+ *       FM emerald, TB orange. Anything else is a quiet b3 pill; `className` recolors it (a
+ *       custom bucket). Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ComponentProps } from "react";
+/** Every native `<span>` prop (including `ref`), plus the slot or mod it shows. */
+export type ModBadgeProps = ComponentProps<"span"> & {
+    /** A mod or slot label ("HD", "NM1", "TB"). Its first two letters pick the color. */
+    mod: string;
+};
+/**
+ * @function ModBadge
+ * @param props {ModBadgeProps} the mod or slot label, and native span props (children replace
+ *        the shown text; a `title` can name the bucket)
+ * @returns {JSX.Element} a rounded pill in the bucket's color with dark text, or b3 with c2 text
+ */
+export declare function ModBadge({ mod, className, children, ...props }: ModBadgeProps): import("react").JSX.Element;

package/dist/components/osu/ModBadge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+const BUCKETS = {
+    NM: "bg-sky-400",
+    HD: "bg-amber-300",
+    HR: "bg-rose-400",
+    DT: "bg-violet-400",
+    NC: "bg-violet-400",
+    FM: "bg-emerald-400",
+    TB: "bg-orange-400",
+};
+const BASE = "inline-flex min-w-11 shrink-0 items-center justify-center whitespace-nowrap rounded-full px-2 py-0.5 font-extrabold text-xs";
+/**
+ * @function ModBadge
+ * @param props {ModBadgeProps} the mod or slot label, and native span props (children replace
+ *        the shown text; a `title` can name the bucket)
+ * @returns {JSX.Element} a rounded pill in the bucket's color with dark text, or b3 with c2 text
+ */
+export function ModBadge({ mod, className, children, ...props }) {
+    const color = BUCKETS[mod.slice(0, 2).toUpperCase()];
+    return (_jsx("span", { className: cx(BASE, color ? `${color} text-b6` : "bg-b3 text-c2", className), ...props, children: children ?? mod }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * @file src/components/osu/StarRating.tsx
+ * @desc A star-rating pill colored on osu!'s difficulty spectrum (the packs beatmap cards):
+ *       "★ 5.23" on the rating's color. Screen readers hear "5.23 stars" and an optional label
+ *       after it (what a `title` tells mouse users). Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** Every native `<span>` prop except children, plus the rating and what screen readers hear. */
+export type StarRatingProps = Omit<ComponentProps<"span">, "children"> & {
+    /** The star rating. Shown with two decimals; NaN shows as "–". */
+    value: number;
+    /** Read after the rating by screen readers, e.g. "with HR". */
+    label?: ReactNode;
+    /** The word read after the number (default "stars"). */
+    unit?: string | undefined;
+};
+/**
+ * @function StarRating
+ * @param props {StarRatingProps} the rating, an optional label and unit, and native span props
+ *        (`style` merges over the spectrum colors)
+ * @returns {JSX.Element} a rounded pill with a star and the rating, colored by the rating
+ */
+export declare function StarRating({ value, label, unit, className, style, ...props }: StarRatingProps): import("react").JSX.Element;

package/dist/components/osu/StarRating.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+import { starRatingColor, starRatingTextColor } from "./starColors.js";
+/**
+ * @function StarRating
+ * @param props {StarRatingProps} the rating, an optional label and unit, and native span props
+ *        (`style` merges over the spectrum colors)
+ * @returns {JSX.Element} a rounded pill with a star and the rating, colored by the rating
+ */
+export function StarRating({ value, label, unit = "stars", className, style, ...props }) {
+    const text = Number.isFinite(value) ? value.toFixed(2) : "–";
+    return (_jsxs("span", { className: cx("inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-bold text-xs tabular-nums", className), style: {
+            backgroundColor: starRatingColor(value),
+            color: starRatingTextColor(value),
+            ...style,
+        }, ...props, children: [_jsx("span", { "aria-hidden": "true", children: "\u2605" }), _jsx("span", { "aria-hidden": "true", children: text }), _jsxs("span", { className: "sr-only", children: [text, " ", unit, label ? _jsxs(_Fragment, { children: [", ", label] }) : null] })] }));
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/osu/starColors.ts
+ * @desc osu!'s star-rating color spectrum (internal), for StarRating's pill. The stops are osu!
+ *       (lazer) difficulty colors, as data (no osu! source copied), blended in RGB between stops.
+ *       They are the same at every --hue, like the wordmark's brand colors.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/**
+ * @function starRatingColor
+ * @param stars {number} a star rating
+ * @returns {string} a CSS `rgb()` color: grey below 0.1 (and for NaN), black from 9 up, and a
+ *          straight blend between the two stops around it otherwise
+ */
+export declare const starRatingColor: (stars: number) => string;
+/**
+ * @function starRatingTextColor
+ * @param stars {number} a star rating
+ * @returns {string} text that reads on `starRatingColor(stars)`: black up to 6.5, then osu!'s pale
+ *          yellow on the dark end of the spectrum
+ */
+export declare const starRatingTextColor: (stars: number) => string;

package/dist/components/osu/starColors.js

@@ -0,0 +1,48 @@
+/**
+ * @file src/components/osu/starColors.ts
+ * @desc osu!'s star-rating color spectrum (internal), for StarRating's pill. The stops are osu!
+ *       (lazer) difficulty colors, as data (no osu! source copied), blended in RGB between stops.
+ *       They are the same at every --hue, like the wordmark's brand colors.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+const STOPS = [
+    [0.1, [66, 144, 251]],
+    [1.25, [79, 192, 255]],
+    [2, [79, 255, 213]],
+    [2.5, [124, 255, 79]],
+    [3.3, [246, 240, 92]],
+    [4.2, [255, 128, 104]],
+    [4.9, [255, 78, 111]],
+    [5.8, [198, 69, 184]],
+    [6.7, [101, 99, 222]],
+    [7.7, [24, 21, 142]],
+    [9, [0, 0, 0]],
+];
+const css = ([r, g, b]) => `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
+/**
+ * @function starRatingColor
+ * @param stars {number} a star rating
+ * @returns {string} a CSS `rgb()` color: grey below 0.1 (and for NaN), black from 9 up, and a
+ *          straight blend between the two stops around it otherwise
+ */
+export const starRatingColor = (stars) => {
+    if (!(stars >= 0.1))
+        return css([170, 170, 170]);
+    const upper = STOPS.findIndex(([at]) => stars < at);
+    const low = STOPS[upper - 1];
+    const high = STOPS[upper];
+    if (!low || !high)
+        return css([0, 0, 0]);
+    const t = (stars - low[0]) / (high[0] - low[0]);
+    const mix = (i) => low[1][i] + (high[1][i] - low[1][i]) * t;
+    return css([mix(0), mix(1), mix(2)]);
+};
+/**
+ * @function starRatingTextColor
+ * @param stars {number} a star rating
+ * @returns {string} text that reads on `starRatingColor(stars)`: black up to 6.5, then osu!'s pale
+ *          yellow on the dark end of the spectrum
+ */
+export const starRatingTextColor = (stars) => stars >= 6.5 ? css([255, 217, 102]) : css([0, 0, 0]);

package/dist/components/shell/HeaderMenu.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @file src/components/shell/HeaderMenu.tsx
+ * @desc The header's account menu (the pools avatar menu): a button that discloses a small panel
+ *       of links and extra controls (a sign-out button). A disclosure, not an ARIA menu: Tab moves
+ *       through the links. Escape closes it and puts focus back on the button; a click outside,
+ *       a click on a link, or focus leaving it closes it too.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+/** One link in the panel. */
+export type HeaderMenuItem = {
+    href: string;
+    label: ReactNode;
+};
+/** Every native `<div>` prop except children, plus the button, the links and extra controls. */
+export type HeaderMenuProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The button's content, e.g. an avatar and a name. Give an image-only button an aria-label. */
+    label: ReactNode;
+    /** Links in the panel, top to bottom. */
+    items?: readonly HeaderMenuItem[] | undefined;
+    /** Shown after the links, e.g. a sign-out button. */
+    children?: ReactNode;
+    /** Which edge of the button the panel lines up with (default "end", for a header's right side). */
+    align?: "start" | "end" | undefined;
+    /** Accessible name for the button, when its content isn't text. */
+    buttonLabel?: string | undefined;
+    /** Classes for the button, merged last. */
+    buttonClassName?: string | undefined;
+};
+/**
+ * @function HeaderMenu
+ * @param props {HeaderMenuProps} the button's content, the links, extra controls as children, the
+ *        panel's alignment, and native div props for the wrapper
+ * @returns {JSX.Element} the toggle button (aria-expanded, aria-controls) and, while open, the
+ *          panel below it
+ */
+export declare function HeaderMenu({ label, items, children, align, buttonLabel, buttonClassName, className, ...props }: HeaderMenuProps): import("react").JSX.Element;

package/dist/components/shell/HeaderMenu.js

@@ -0,0 +1,58 @@
+/**
+ * @file src/components/shell/HeaderMenu.tsx
+ * @desc The header's account menu (the pools avatar menu): a button that discloses a small panel
+ *       of links and extra controls (a sign-out button). A disclosure, not an ARIA menu: Tab moves
+ *       through the links. Escape closes it and puts focus back on the button; a click outside,
+ *       a click on a link, or focus leaving it closes it too.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../../utils/cx.js";
+import { AutoLink } from "../basics/AutoLink.js";
+const ITEM = "block rounded px-3 py-2 font-bold text-c2 text-sm hover:bg-b4 hover:text-c1";
+/**
+ * @function HeaderMenu
+ * @param props {HeaderMenuProps} the button's content, the links, extra controls as children, the
+ *        panel's alignment, and native div props for the wrapper
+ * @returns {JSX.Element} the toggle button (aria-expanded, aria-controls) and, while open, the
+ *          panel below it
+ */
+export function HeaderMenu({ label, items = [], children, align = "end", buttonLabel, buttonClassName, className, ...props }) {
+    const panelId = useId();
+    const [open, setOpen] = useState(false);
+    const wrapper = useRef(null);
+    const button = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointer = (event) => {
+            if (!wrapper.current?.contains(event.target))
+                setOpen(false);
+        };
+        const onKey = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setOpen(false);
+            button.current?.focus();
+        };
+        // Tab past the last control (or Shift+Tab before the button) closes the panel.
+        const onFocusOut = (event) => {
+            if (!wrapper.current?.contains(event.relatedTarget))
+                setOpen(false);
+        };
+        const box = wrapper.current;
+        document.addEventListener("pointerdown", onPointer);
+        document.addEventListener("keydown", onKey);
+        box?.addEventListener("focusout", onFocusOut);
+        return () => {
+            document.removeEventListener("pointerdown", onPointer);
+            document.removeEventListener("keydown", onKey);
+            box?.removeEventListener("focusout", onFocusOut);
+        };
+    }, [open]);
+    return (_jsxs("div", { ref: wrapper, className: cx("relative", className), ...props, children: [_jsx("button", { ref: button, type: "button", "aria-expanded": open, "aria-controls": panelId, "aria-label": buttonLabel, onClick: () => setOpen(!open), className: cx("flex items-center gap-2 font-bold text-c1 text-sm transition-colors hover:text-h1", buttonClassName), children: label }), _jsxs("div", { id: panelId, hidden: !open, className: cx("absolute z-10 mt-2 w-44 flex-col gap-1 rounded-lg border border-b3 bg-b6 p-2", open && "flex", align === "end" ? "right-0" : "left-0"), children: [items.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1", children: items.map((item) => (_jsx("li", { children: _jsx(AutoLink, { href: item.href, className: ITEM, onClick: () => setOpen(false), children: item.label }) }, item.href))) })) : null, children] })] }));
+}

package/dist/components/shell/LinkNote.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file src/components/shell/LinkNote.tsx
+ * @desc The small uppercase note beside a nav or footer entry, like "soon" (internal). NavItem and
+ *       SiteFooter share it. No class merging, so the header's client list can render it.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/**
+ * @function LinkNote
+ * @param props {{ note?: string }} the entry's note, if any
+ * @returns {JSX.Element | null} a space and the note in small muted capitals, or nothing
+ */
+export declare function LinkNote({ note }: {
+    note?: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/components/shell/LinkNote.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/shell/LinkNote.tsx
+ * @desc The small uppercase note beside a nav or footer entry, like "soon" (internal). NavItem and
+ *       SiteFooter share it. No class merging, so the header's client list can render it.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/**
+ * @function LinkNote
+ * @param props {{ note?: string }} the entry's note, if any
+ * @returns {JSX.Element | null} a space and the note in small muted capitals, or nothing
+ */
+export function LinkNote({ note }) {
+    return note ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "text-c4 text-xs uppercase tracking-wide", children: note })] })) : null;
+}

package/dist/components/shell/LinkTabs.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file src/components/shell/LinkTabs.tsx
+ * @desc A row of link tabs (Pools / Maps, All / Hidden): a named `<nav>` whose current link is
+ *       marked aria-current="page" and drawn as a b3 pill. Links, not ARIA tabs, since each one
+ *       loads its own URL. Server-safe: the caller says which link is current.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** One tab: where it links, its text, and whether it is the page being shown. */
+export type LinkTabItem = {
+    href: string;
+    label: ReactNode;
+    current?: boolean | undefined;
+};
+/** Every native `<nav>` prop except children, plus the nav's name and the tabs. */
+export type LinkTabsProps = Omit<ComponentProps<"nav">, "children"> & {
+    /** The nav landmark's accessible name, e.g. "What to search". */
+    label: string;
+    /** The tabs, left to right. Give each its own href. */
+    items: readonly LinkTabItem[];
+};
+/**
+ * @function LinkTabs
+ * @param props {LinkTabsProps} the nav's label, the tabs, and native nav props
+ * @returns {JSX.Element} a `<nav>` with a list of pill links, the current one aria-current="page"
+ */
+export declare function LinkTabs({ label, items, className, ...props }: LinkTabsProps): import("react").JSX.Element;

package/dist/components/shell/LinkTabs.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+import { AutoLink } from "../basics/AutoLink.js";
+const TAB = "rounded-full px-3 py-1 font-bold text-sm transition-colors";
+// Forced-colors mode drops the pill's background, so the current tab is underlined there.
+const CURRENT = "bg-b3 text-c1 forced-colors:underline";
+const OTHER = "text-c3 hover:text-c1";
+/**
+ * @function LinkTabs
+ * @param props {LinkTabsProps} the nav's label, the tabs, and native nav props
+ * @returns {JSX.Element} a `<nav>` with a list of pill links, the current one aria-current="page"
+ */
+export function LinkTabs({ label, items, className, ...props }) {
+    return (_jsx("nav", { "aria-label": label, className: className, ...props, children: _jsx("ul", { className: "flex flex-wrap gap-2", children: items.map((item) => (_jsx("li", { children: _jsx(AutoLink, { href: item.href, "aria-current": item.current ? "page" : undefined, className: cx(TAB, item.current ? CURRENT : OTHER), children: item.label }) }, item.href))) }) }));
+}

package/dist/components/shell/NavItem.d.ts

@@ -5,7 +5,7 @@
  *       browser, so both lists print the same markup.
  * @author David @dvhsh (https://dvh.sh)
  * @created Thu Sep 24, 2026
- * @modified Thu Sep 24, 2026
+ * @modified Mon Sep 28, 2026
  */
 import type { SiteLinkItem } from "./links.js";
 /** One nav entry, its aria-current and the finished classes for its link. */
@@ -16,12 +16,6 @@ export type NavItemProps = {
     /** Classes for the link. Ignored for an entry without `href`. */
     linkClassName: string;
 };
-/**
- * @function navItemKey
- * @param item {SiteLinkItem} a nav entry
- * @returns {string} its React key: the href, or the label for a text-only entry
- */
-export declare const navItemKey: (item: SiteLinkItem) => string;
 /**
  * @function NavItem
  * @param props {NavItemProps} the entry, its aria-current and its link classes

package/dist/components/shell/NavItem.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file src/components/shell/NavItem.tsx
  * @desc One entry of the header's nav list (internal): a link, or dimmed text with its note when
@@ -6,15 +6,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *       browser, so both lists print the same markup.
  * @author David @dvhsh (https://dvh.sh)
  * @created Thu Sep 24, 2026
- * @modified Thu Sep 24, 2026
+ * @modified Mon Sep 28, 2026
  */
-import { AutoLink } from "./AutoLink.js";
-/**
- * @function navItemKey
- * @param item {SiteLinkItem} a nav entry
- * @returns {string} its React key: the href, or the label for a text-only entry
- */
-export const navItemKey = (item) => item.href || item.label;
+import { AutoLink } from "../basics/AutoLink.js";
+import { LinkNote } from "./LinkNote.js";
 /**
  * @function NavItem
  * @param props {NavItemProps} the entry, its aria-current and its link classes
@@ -22,7 +17,7 @@ export const navItemKey = (item) => item.href || item.label;
  */
 export function NavItem({ item, current, linkClassName }) {
     if (!item.href) {
-        return (_jsx("li", { children: _jsxs("span", { "aria-disabled": "true", className: "text-c4", children: [item.label, item.note ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "text-xs uppercase tracking-wide", children: item.note })] })) : null] }) }));
+        return (_jsx("li", { children: _jsxs("span", { "aria-disabled": "true", className: "text-c4", children: [item.label, _jsx(LinkNote, { note: item.note })] }) }));
     }
     return (_jsx("li", { children: _jsx(AutoLink, { href: item.href, "aria-current": current, className: linkClassName, children: item.label }) }));
 }

package/dist/components/shell/NavLinks.d.ts

@@ -5,7 +5,7 @@
  *       it to the small NavListClient, which reads the path to set aria-current.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Thu Sep 24, 2026
+ * @modified Mon Sep 28, 2026
  */
 import type { ComponentProps } from "react";
 import { type SiteLinkItem } from "./links.js";

package/dist/components/shell/NavLinks.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
-import { canBeCurrent } from "./links.js";
-import { NavItem, navItemKey } from "./NavItem.js";
+import { canBeCurrent, linkItemKey } from "./links.js";
+import { NavItem } from "./NavItem.js";
 import { NavListClient } from "./NavListClient.js";
 const LISTS = {
     start: "flex flex-wrap gap-x-5 gap-y-1 font-bold text-sm",
@@ -25,7 +25,7 @@ const CURRENT = "text-c1 transition-colors";
 export function NavLinks({ links, align = "start", className, ...props }) {
     const listClassName = cx(LISTS[align], className);
     if (!links.some((item) => item.href && canBeCurrent(item.href))) {
-        return (_jsx("ul", { className: listClassName, ...props, children: links.map((item) => (_jsx(NavItem, { item: item, linkClassName: LINKS[align] }, navItemKey(item)))) }));
+        return (_jsx("ul", { className: listClassName, ...props, children: links.map((item) => (_jsx(NavItem, { item: item, linkClassName: LINKS[align] }, linkItemKey(item)))) }));
     }
     return (_jsx(NavListClient, { links: links, linkClassName: LINKS[align], currentClassName: CURRENT, className: listClassName, ...props }));
 }

package/dist/components/shell/NavListClient.d.ts

@@ -5,7 +5,7 @@
  *       the server, so it imports no class merging and ships no tailwind-merge to the browser.
  * @author David @dvhsh (https://dvh.sh)
  * @created Thu Sep 24, 2026
- * @modified Thu Sep 24, 2026
+ * @modified Mon Sep 28, 2026
  */
 import type { ComponentProps } from "react";
 import { type SiteLinkItem } from "./links.js";

package/dist/components/shell/NavListClient.js

@@ -5,13 +5,13 @@
  *       the server, so it imports no class merging and ships no tailwind-merge to the browser.
  * @author David @dvhsh (https://dvh.sh)
  * @created Thu Sep 24, 2026
- * @modified Thu Sep 24, 2026
+ * @modified Mon Sep 28, 2026
  */
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { usePathname } from "next/navigation.js";
-import { ariaCurrentFor } from "./links.js";
-import { NavItem, navItemKey } from "./NavItem.js";
+import { ariaCurrentFor, linkItemKey } from "./links.js";
+import { NavItem } from "./NavItem.js";
 /**
  * @function NavListClient
  * @param props {NavListClientProps} the links, the classes for current and other links, and
@@ -22,6 +22,6 @@ export function NavListClient({ links, linkClassName, currentClassName, ...props
     const pathname = usePathname();
     return (_jsx("ul", { ...props, children: links.map((item) => {
             const current = item.href ? ariaCurrentFor(pathname, item.href) : undefined;
-            return (_jsx(NavItem, { item: item, current: current, linkClassName: current ? currentClassName : linkClassName }, navItemKey(item)));
+            return (_jsx(NavItem, { item: item, current: current, linkClassName: current ? currentClassName : linkClassName }, linkItemKey(item)));
         }) }));
 }

package/dist/components/shell/SiteFooter.d.ts

@@ -2,13 +2,14 @@
  * @file src/components/shell/SiteFooter.tsx
  * @desc Site footer: labelled link columns from data (entries without an href show as text with
  *       a small note, like "soon"), an optional extra slot, one line of fine print, the
- *       haruhime.moe wordmark linking the parent site, and a GitHub icon link.
+ *       haruhime.moe wordmark linking the parent site, a GitHub icon link, and an optional
+ *       Discord icon link beside it (white, as Discord's brand guidelines ask).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
-import type { SiteLinkItem } from "./links.js";
+import { type SiteLinkItem } from "./links.js";
 /** One footer column: a title (also the nav landmark's name) and its entries. */
 export type SiteFooterColumn = {
     title: string;
@@ -30,11 +31,15 @@ export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
     githubHref?: string | false | undefined;
     /** The GitHub link's accessible name. Default "haruhimemoe on GitHub". */
     githubLabel?: string | undefined;
+    /** Where the Discord icon links, e.g. a server invite. No Discord icon without it. */
+    discordHref?: string | undefined;
+    /** The Discord link's accessible name. Default "Discord". */
+    discordLabel?: string | undefined;
 };
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent and GitHub links, and
- *        native footer props
+ * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ *        links and their names, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export declare function SiteFooter({ columns, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;
+export declare function SiteFooter({ columns, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, discordLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;

package/dist/components/shell/SiteFooter.js

@@ -1,21 +1,32 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
+import { AutoLink } from "../basics/AutoLink.js";
+import { DiscordIcon } from "../icons/DiscordIcon.js";
 import { GitHubIcon } from "../icons/GitHubIcon.js";
 import { HaruhimeWordmarkLink } from "../icons/HaruhimeWordmarkLink.js";
-import { AutoLink } from "./AutoLink.js";
+import { LinkNote } from "./LinkNote.js";
+import { linkItemKey } from "./links.js";
+// The GitHub icon link in the bottom row.
+const ICON_LINK = "shrink-0 text-c3 transition-colors hover:text-c1";
+// Discord's brand guidelines ask for the logo in color, black or white, never recolored. c1 is
+// white at every hue, so the Discord link stays white and dims on hover instead of changing hue.
+const DISCORD_LINK = "shrink-0 text-c1 transition-opacity hover:opacity-80";
 // Static strings so Tailwind sees every class. Four or more columns share the four-column grid.
 const GRID_COLUMNS = ["", "", "sm:grid-cols-2", "sm:grid-cols-3", "sm:grid-cols-4"];
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent and GitHub links, and
- *        native footer props
+ * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ *        links and their names, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export function SiteFooter({ columns = [], extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", className, ...props }) {
+export function SiteFooter({ columns = [], extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", discordHref, discordLabel = "Discord", className, ...props }) {
     const fine = finePrint ? _jsx("p", { className: "text-c4 text-xs", children: finePrint }) : null;
-    const github = githubHref ? (_jsx("a", { href: githubHref, "aria-label": githubLabel, className: "shrink-0 text-c3 transition-colors hover:text-c1", children: _jsx(GitHubIcon, {}) })) : null;
+    const github = githubHref ? (_jsx("a", { href: githubHref, "aria-label": githubLabel, className: ICON_LINK, children: _jsx(GitHubIcon, {}) })) : null;
+    const discord = discordHref ? (_jsx("a", { href: discordHref, "aria-label": discordLabel, className: DISCORD_LINK, children: _jsx(DiscordIcon, {}) })) : null;
+    // Both icons sit together at the row's end, Discord first. One icon stays a direct child.
+    const icons = discord && github ? (_jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [discord, github] })) : ((discord ?? github));
     // With the wordmark, the fine print gets its own line and the row holds wordmark + icon.
     // Without it, the fine print shares the row with the icon.
     const rowStart = parentLink ? _jsx(HaruhimeWordmarkLink, { href: parentHref }) : fine;
-    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("div", { className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, children: [_jsx("p", { className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), item.note ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "text-c4 text-xs uppercase tracking-wide", children: item.note })] })) : null] }, `${item.label} ${item.href ?? ""}`))) })] }, column.title))) })) : null, extra || fine || rowStart || github ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || github ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, github] })) : null] })) : null] }) }));
+    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("div", { className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, children: [_jsx("p", { className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), _jsx(LinkNote, { note: item.note })] }, linkItemKey(item)))) })] }, column.title))) })) : null, extra || fine || rowStart || icons ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || icons ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, icons] })) : null] })) : null] }) }));
 }