@haruhimemoe/ui 0.3.0 → 0.5.0

package/dist/components/actions/useLatestStatus.js

@@ -0,0 +1,32 @@
+/**
+ * @file src/components/actions/useLatestStatus.ts
+ * @desc The status that CopyButton and AsyncButton report (internal): each run empties it first,
+ *       and only the latest run may fill it, so a slow earlier run can't overwrite a newer result.
+ *       Each result carries its run's number, so StatusOutput mounts it as a fresh node and a
+ *       repeated message is announced again.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { useRef, useState } from "react";
+/**
+ * @function useLatestStatus
+ * @returns {{ status: LatestStatus<T>; start: () => number; settle: (run: number, result: T) =>
+ *          void }} the status, `start` (empties it and returns the new run's number) and `settle`
+ *          (sets a run's result, unless a later run has started since)
+ */
+export function useLatestStatus() {
+    const [status, setStatus] = useState(null);
+    const runs = useRef(0);
+    const start = () => {
+        setStatus(null);
+        runs.current += 1;
+        return runs.current;
+    };
+    const settle = (run, result) => {
+        if (run === runs.current)
+            setStatus({ result, run });
+    };
+    return { status, start, settle };
+}

package/dist/components/basics/AutoLink.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file src/components/basics/AutoLink.tsx
+ * @desc A link that picks its element from the href (internal): `next/link` for paths inside the
+ *       app, a plain `<a>` for a string href that leaves it (a scheme like https: or mailto:, or
+ *       //host). The plain `<a>` drops next/link's own props, and gets rel="noreferrer" when it
+ *       opens in a new tab. ButtonLink, TextLink, the nav and the footer all render it.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import Link from "next/link.js";
+import type { ComponentProps } from "react";
+/** Every next/link prop (including `ref`). */
+export type AutoLinkProps = ComponentProps<typeof Link>;
+/**
+ * @function AutoLink
+ * @param props {AutoLinkProps} next/link props
+ * @returns {JSX.Element} a `next/link` for internal paths (and URL objects), or a plain `<a>` for
+ *          an external string href, with rel="noreferrer" when `target="_blank"` and no `rel`
+ */
+export declare function AutoLink({ href, target, rel, ...props }: AutoLinkProps): import("react").JSX.Element;

package/dist/components/basics/AutoLink.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file src/components/basics/AutoLink.tsx
+ * @desc A link that picks its element from the href (internal): `next/link` for paths inside the
+ *       app, a plain `<a>` for a string href that leaves it (a scheme like https: or mailto:, or
+ *       //host). The plain `<a>` drops next/link's own props, and gets rel="noreferrer" when it
+ *       opens in a new tab. ButtonLink, TextLink, the nav and the footer all render it.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import Link from "next/link.js";
+import { isExternalHref } from "../../utils/href.js";
+/**
+ * @function AutoLink
+ * @param props {AutoLinkProps} next/link props
+ * @returns {JSX.Element} a `next/link` for internal paths (and URL objects), or a plain `<a>` for
+ *          an external string href, with rel="noreferrer" when `target="_blank"` and no `rel`
+ */
+export function AutoLink({ href, target, rel, ...props }) {
+    if (typeof href === "string" && isExternalHref(href)) {
+        const { as: _as, replace: _replace, scroll: _scroll, shallow: _shallow, passHref: _passHref, prefetch: _prefetch, locale: _locale, legacyBehavior: _legacyBehavior, onNavigate: _onNavigate, transitionTypes: _transitionTypes, ...anchorProps } = props;
+        return (_jsx("a", { href: href, target: target, rel: rel ?? (target === "_blank" ? "noreferrer" : undefined), ...anchorProps }));
+    }
+    return _jsx(Link, { href: href, target: target, rel: rel, ...props });
+}

package/dist/components/basics/Badge.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @file src/components/basics/Badge.tsx
+ * @desc A small pill for a status or a tag ("Unranked", "beta", a count). Static text: no role,
+ *       so screen readers read it in place with the text around it. Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ComponentProps } from "react";
+/** The badge's colors: neutral b3, accent h1, a warning amber, or a muted outline. */
+export type BadgeTone = "neutral" | "accent" | "warning" | "muted";
+/** Every native `<span>` prop (including `ref`), plus a tone. */
+export type BadgeProps = ComponentProps<"span"> & {
+    /** "neutral" (default), "accent", "warning" or "muted" (outlined, small capitals). */
+    tone?: BadgeTone | undefined;
+};
+/**
+ * @function Badge
+ * @param props {BadgeProps} native span props, plus a tone (default "neutral")
+ * @returns {JSX.Element} a rounded `<span>` pill in the tone's colors
+ */
+export declare function Badge({ tone, className, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/components/basics/Badge.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+const BASE = "inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 text-xs";
+// The looks the apps already use: pools' tags and warnings, and its header's beta pill.
+const TONES = {
+    neutral: "bg-b3 text-c2",
+    accent: "bg-h1 font-bold text-b6",
+    warning: "bg-amber-300/20 font-bold text-amber-200",
+    muted: "border border-b3 bg-b5 font-bold text-c4 uppercase tracking-wide",
+};
+/**
+ * @function Badge
+ * @param props {BadgeProps} native span props, plus a tone (default "neutral")
+ * @returns {JSX.Element} a rounded `<span>` pill in the tone's colors
+ */
+export function Badge({ tone = "neutral", className, ...props }) {
+    return _jsx("span", { className: cx(BASE, TONES[tone], className), ...props });
+}

package/dist/components/basics/ButtonLink.d.ts

@@ -1,16 +1,15 @@
 /**
  * @file src/components/basics/ButtonLink.tsx
  * @desc next/link styled as a pill button. Off-site hrefs (a scheme like https: or mailto:, or
- *       //host) render a plain <a>, with rel="noreferrer" when opened in a new tab.
+ *       //host) render a plain <a>, with rel="noreferrer" when opened in a new tab (AutoLink).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
-import Link from "next/link.js";
-import type { ComponentProps } from "react";
+import { type AutoLinkProps } from "./AutoLink.js";
 import { type ButtonSize, type ButtonVariant } from "./buttonStyles.js";
 /** Every next/link prop (including `ref`), plus a button variant and size. */
-export type ButtonLinkProps = ComponentProps<typeof Link> & {
+export type ButtonLinkProps = AutoLinkProps & {
     variant?: ButtonVariant | undefined;
     size?: ButtonSize | undefined;
 };
@@ -20,4 +19,4 @@ export type ButtonLinkProps = ComponentProps<typeof Link> & {
  * @returns {JSX.Element} a next/link styled as a pill button, or a plain `<a>` for an external
  *          href (next/link's own props are dropped there)
  */
-export declare function ButtonLink({ variant, size, className, href, target, rel, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export declare function ButtonLink({ variant, size, className, ...props }: ButtonLinkProps): import("react").JSX.Element;

package/dist/components/basics/ButtonLink.js

@@ -2,13 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @file src/components/basics/ButtonLink.tsx
  * @desc next/link styled as a pill button. Off-site hrefs (a scheme like https: or mailto:, or
- *       //host) render a plain <a>, with rel="noreferrer" when opened in a new tab.
+ *       //host) render a plain <a>, with rel="noreferrer" when opened in a new tab (AutoLink).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
-import Link from "next/link.js";
-import { isExternalHref } from "../../utils/href.js";
+import { AutoLink } from "./AutoLink.js";
 import { buttonClasses } from "./buttonStyles.js";
 /**
  * @function ButtonLink
@@ -16,11 +15,6 @@ import { buttonClasses } from "./buttonStyles.js";
  * @returns {JSX.Element} a next/link styled as a pill button, or a plain `<a>` for an external
  *          href (next/link's own props are dropped there)
  */
-export function ButtonLink({ variant, size, className, href, target, rel, ...props }) {
-    const classes = buttonClasses({ variant, size, className });
-    if (typeof href === "string" && isExternalHref(href)) {
-        const { as: _as, replace: _replace, scroll: _scroll, shallow: _shallow, passHref: _passHref, prefetch: _prefetch, locale: _locale, legacyBehavior: _legacyBehavior, onNavigate: _onNavigate, transitionTypes: _transitionTypes, ...anchorProps } = props;
-        return (_jsx("a", { href: href, target: target, rel: rel ?? (target === "_blank" ? "noreferrer" : undefined), className: classes, ...anchorProps }));
-    }
-    return _jsx(Link, { href: href, target: target, rel: rel, className: classes, ...props });
+export function ButtonLink({ variant, size, className, ...props }) {
+    return _jsx(AutoLink, { className: buttonClasses({ variant, size, className }), ...props });
 }

package/dist/components/basics/Card.d.ts

@@ -4,14 +4,15 @@
  *       region. Server-safe (useId works in Server Components).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Thu Sep 24, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
+import { type HeadingLevel } from "./cardStyles.js";
 /** Every native `<section>` prop (including `ref`), with `title` rendered as the card's heading. */
 export type CardProps = Omit<ComponentProps<"section">, "title"> & {
     title?: ReactNode | undefined;
-    /** Heading level for the title (default 2). Use 3 or 4 for a card under another heading. */
-    headingLevel?: 2 | 3 | 4 | undefined;
+    /** Heading level for the title (default 2). Use 3 or lower for a card under another heading. */
+    headingLevel?: HeadingLevel | undefined;
 };
 /**
  * @function Card

package/dist/components/basics/Card.js

@@ -5,10 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *       region. Server-safe (useId works in Server Components).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Thu Sep 24, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { useId } from "react";
 import { cx } from "../../utils/cx.js";
+import { CARD, CARD_HEADING } from "./cardStyles.js";
 /**
  * @function Card
  * @param props {CardProps} an optional title that labels the region, its heading level (default
@@ -18,5 +19,5 @@ import { cx } from "../../utils/cx.js";
 export function Card({ title, headingLevel = 2, className, children, ...props }) {
     const headingId = useId();
     const Heading = `h${headingLevel}`;
-    return (_jsxs("section", { "aria-labelledby": title ? headingId : undefined, className: cx("rounded-[10px] bg-b4 p-5 text-c2", className), ...props, children: [title ? (_jsx(Heading, { id: headingId, className: "mb-2 font-bold text-c1 text-lg", children: title })) : null, children] }));
+    return (_jsxs("section", { "aria-labelledby": title ? headingId : undefined, className: cx(CARD, className), ...props, children: [title ? (_jsx(Heading, { id: headingId, className: cx("mb-2", CARD_HEADING), children: title })) : null, children] }));
 }

package/dist/components/basics/Disclosure.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @file src/components/basics/Disclosure.tsx
+ * @desc A button that shows and hides a panel below it (the packs download options): the button
+ *       carries aria-expanded and aria-controls, and the closed panel stays in the page, hidden,
+ *       so its form fields keep their values. Uncontrolled by default, or controlled with `open`.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+/** Every native `<div>` prop for the wrapper, plus the button's text and the panel. */
+export type DisclosureProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The button's text. It can change with `open` ("Download options" / a summary). */
+    summary: ReactNode;
+    /** The panel, shown while open. */
+    children: ReactNode;
+    /** Whether it starts open (default false). Ignored when `open` is set. */
+    defaultOpen?: boolean | undefined;
+    /** Controls the state from outside; pair it with `onOpenChange`. */
+    open?: boolean | undefined;
+    /** Called with the new state when the button is pressed. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Classes for the button, merged last. */
+    buttonClassName?: string | undefined;
+    /** Classes for the panel, merged last. */
+    panelClassName?: string | undefined;
+};
+/**
+ * @function Disclosure
+ * @param props {DisclosureProps} the summary, the panel as children, the open state, and native
+ *        div props for the wrapper
+ * @returns {JSX.Element} the toggle button (with a ▾ / ▴ arrow) and the panel it controls
+ */
+export declare function Disclosure({ summary, children, defaultOpen, open, onOpenChange, buttonClassName, panelClassName, className, ...props }: DisclosureProps): import("react").JSX.Element;

package/dist/components/basics/Disclosure.js

@@ -0,0 +1,30 @@
+/**
+ * @file src/components/basics/Disclosure.tsx
+ * @desc A button that shows and hides a panel below it (the packs download options): the button
+ *       carries aria-expanded and aria-controls, and the closed panel stays in the page, hidden,
+ *       so its form fields keep their values. Uncontrolled by default, or controlled with `open`.
+ * @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 { useId, useState } from "react";
+import { cx } from "../../utils/cx.js";
+/**
+ * @function Disclosure
+ * @param props {DisclosureProps} the summary, the panel as children, the open state, and native
+ *        div props for the wrapper
+ * @returns {JSX.Element} the toggle button (with a ▾ / ▴ arrow) and the panel it controls
+ */
+export function Disclosure({ summary, children, defaultOpen = false, open, onOpenChange, buttonClassName, panelClassName, className, ...props }) {
+    const panelId = useId();
+    const [inner, setInner] = useState(defaultOpen);
+    const isOpen = open ?? inner;
+    const toggle = () => {
+        if (open === undefined)
+            setInner(!isOpen);
+        onOpenChange?.(!isOpen);
+    };
+    return (_jsxs("div", { className: cx("flex flex-col gap-2", className), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isOpen, "aria-controls": panelId, onClick: toggle, className: cx("inline-flex items-center gap-1 self-start font-bold text-c2 text-sm transition-colors hover:text-c1", buttonClassName), children: [summary, _jsx("span", { "aria-hidden": "true", children: isOpen ? "▴" : "▾" })] }), _jsx("div", { id: panelId, hidden: !isOpen, className: panelClassName, children: children })] }));
+}

package/dist/components/basics/Notice.d.ts

@@ -6,9 +6,10 @@
  *       status region that mounts with its text already inside may not be announced.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import type { ComponentProps } from "react";
+/** The notice's color, and its live role: `info` is c3, `warning` amber, `error` rose. */
 export type NoticeTone = "info" | "warning" | "error";
 /** Every native `<p>` prop (including `ref`), plus a tone, a live flag and the element to render. */
 export type NoticeProps = ComponentProps<"p"> & {

package/dist/components/basics/Tabs.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file src/components/basics/Tabs.tsx
+ * @desc A tab list for panels on the same page (not links; LinkTabs is for those): buttons with
+ *       role="tab", the chosen one aria-selected and the only one in the Tab order. Left and Right
+ *       (wrapping), Home and End pick and focus a tab. The panels are the caller's: give each
+ *       `id={tabPanelId(idPrefix, tab)}`, role="tabpanel" and
+ *       `aria-labelledby={tabId(idPrefix, tab)}`. Controlled. Moved from bb.haruhime.moe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** One tab: its id (part of the tab's and panel's ids) and its text. */
+export type TabItem<T extends string = string> = {
+    id: T;
+    label: ReactNode;
+};
+/** Every native `<div>` prop except `onChange` and children, plus the list's parts. */
+export type TabsProps<T extends string = string> = Omit<ComponentProps<"div">, "onChange" | "children"> & {
+    /** Names the tab list. */
+    label: string;
+    /** Prefix for the tabs' and panels' ids (tabId, tabPanelId). */
+    idPrefix: string;
+    /** The tabs, left to right. */
+    tabs: readonly TabItem<T>[];
+    /** The chosen tab's id. */
+    value: T;
+    /** Called with the picked tab's id. */
+    onChange: (id: T) => void;
+};
+/**
+ * @function Tabs
+ * @param props {TabsProps<T>} the list's name, id prefix, tabs, chosen tab and handler, and
+ *        native div props
+ * @returns {JSX.Element} the tablist with one pill button per tab
+ */
+export declare function Tabs<T extends string>({ label, idPrefix, tabs, value, onChange, className, onKeyDown, ...props }: TabsProps<T>): import("react").JSX.Element;

package/dist/components/basics/Tabs.js

@@ -0,0 +1,47 @@
+/**
+ * @file src/components/basics/Tabs.tsx
+ * @desc A tab list for panels on the same page (not links; LinkTabs is for those): buttons with
+ *       role="tab", the chosen one aria-selected and the only one in the Tab order. Left and Right
+ *       (wrapping), Home and End pick and focus a tab. The panels are the caller's: give each
+ *       `id={tabPanelId(idPrefix, tab)}`, role="tabpanel" and
+ *       `aria-labelledby={tabId(idPrefix, tab)}`. Controlled. Moved from bb.haruhime.moe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+import { tabId, tabPanelId } from "./tabIds.js";
+const KEYS = {
+    ArrowRight: (at, count) => (at + 1) % count,
+    ArrowLeft: (at, count) => (at - 1 + count) % count,
+    Home: () => 0,
+    End: (_at, count) => count - 1,
+};
+/**
+ * @function Tabs
+ * @param props {TabsProps<T>} the list's name, id prefix, tabs, chosen tab and handler, and
+ *        native div props
+ * @returns {JSX.Element} the tablist with one pill button per tab
+ */
+export function Tabs({ label, idPrefix, tabs, value, onChange, className, onKeyDown, ...props }) {
+    // With no tab chosen, the first one is still reachable with Tab.
+    const at = Math.max(0, tabs.findIndex((item) => item.id === value));
+    const move = (event) => {
+        onKeyDown?.(event);
+        const step = KEYS[event.key];
+        if (!step || tabs.length === 0)
+            return;
+        const tab = tabs[step(at, tabs.length)];
+        if (!tab)
+            return;
+        event.preventDefault();
+        onChange(tab.id);
+        document.getElementById(tabId(idPrefix, tab.id))?.focus();
+    };
+    return (_jsx("div", { role: "tablist", "aria-label": label, onKeyDown: move, className: cx("flex gap-1 rounded-full bg-b4 p-1", className), ...props, children: tabs.map((tab, index) => {
+            const selected = tab.id === value;
+            return (_jsx("button", { type: "button", role: "tab", id: tabId(idPrefix, tab.id), "aria-selected": selected, "aria-controls": tabPanelId(idPrefix, tab.id), tabIndex: index === at ? 0 : -1, onClick: () => onChange(tab.id), className: cx("flex-1 rounded-full px-4 py-1.5 font-bold text-sm transition-colors", selected ? "bg-h2 text-c1 forced-colors:underline" : "text-c3 hover:text-c1"), children: tab.label }, tab.id));
+        }) }));
+}

package/dist/components/basics/TextLink.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file src/components/basics/TextLink.tsx
+ * @desc A text link: next/link inside the app, a plain <a> off-site (with rel="noreferrer" in a
+ *       new tab), in the `accent` look for running text or the `plain` one for names in lists.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type AutoLinkProps } from "./AutoLink.js";
+import { type TextLinkVariant } from "./linkStyles.js";
+/** Every next/link prop (including `ref`), plus the link's look. */
+export type TextLinkProps = AutoLinkProps & {
+    /** "accent" (default) for running text, "plain" for a name or title in a list or table. */
+    variant?: TextLinkVariant | undefined;
+};
+/**
+ * @function TextLink
+ * @param props {TextLinkProps} next/link props, plus an optional variant
+ * @returns {JSX.Element} a next/link, or a plain `<a>` for an external href, styled as a text link
+ */
+export declare function TextLink({ variant, className, ...props }: TextLinkProps): import("react").JSX.Element;

package/dist/components/basics/TextLink.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file src/components/basics/TextLink.tsx
+ * @desc A text link: next/link inside the app, a plain <a> off-site (with rel="noreferrer" in a
+ *       new tab), in the `accent` look for running text or the `plain` one for names in lists.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { AutoLink } from "./AutoLink.js";
+import { linkClasses } from "./linkStyles.js";
+/**
+ * @function TextLink
+ * @param props {TextLinkProps} next/link props, plus an optional variant
+ * @returns {JSX.Element} a next/link, or a plain `<a>` for an external href, styled as a text link
+ */
+export function TextLink({ variant, className, ...props }) {
+    return _jsx(AutoLink, { className: linkClasses({ variant, className }), ...props });
+}

package/dist/components/basics/buttonStyles.d.ts

@@ -3,9 +3,11 @@
  * @desc Shared class builder for Button and ButtonLink (osu!-web pill buttons).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
+/** The pill's colors: `primary` is h2 (h1 on hover), `secondary` b3, `ghost` transparent. */
 export type ButtonVariant = "primary" | "secondary" | "ghost";
+/** The pill's height, padding and text size: `md` is h-9 and text-sm, `lg` h-11 and text-base. */
 export type ButtonSize = "md" | "lg";
 /** Options for {@link buttonClasses}. */
 export type ButtonClassOptions = {

package/dist/components/basics/buttonStyles.js

@@ -3,7 +3,7 @@
  * @desc Shared class builder for Button and ButtonLink (osu!-web pill buttons).
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
 import { cx } from "../../utils/cx.js";
 const BASE = "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";

package/dist/components/basics/cardStyles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file src/components/basics/cardStyles.ts
+ * @desc The osu!-web panel look that Card and FilterPanel share: the rounded b4 surface and its
+ *       title, plus the heading levels either one takes for that title.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** A heading level for a component's title: `h2` to `h6` (a page has one `h1`). */
+export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+/** The panel: rounded, b4 background, p-5, c2 text. */
+export declare const CARD = "rounded-[10px] bg-b4 p-5 text-c2";
+/** The panel's title: bold c1 at text-lg. */
+export declare const CARD_HEADING = "font-bold text-c1 text-lg";

package/dist/components/basics/cardStyles.js

@@ -0,0 +1,12 @@
+/**
+ * @file src/components/basics/cardStyles.ts
+ * @desc The osu!-web panel look that Card and FilterPanel share: the rounded b4 surface and its
+ *       title, plus the heading levels either one takes for that title.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** The panel: rounded, b4 background, p-5, c2 text. */
+export const CARD = "rounded-[10px] bg-b4 p-5 text-c2";
+/** The panel's title: bold c1 at text-lg. */
+export const CARD_HEADING = "font-bold text-c1 text-lg";

package/dist/components/basics/linkStyles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/basics/linkStyles.ts
+ * @desc Class builder for text links, shared by TextLink and any element that should look like
+ *       one: `accent` for links in running text (h1, underlined, like Prose), `plain` for names
+ *       and titles in lists and tables (bold c1, underlined on hover).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** A text link's look: `accent` in running text, `plain` for a name or title in a list. */
+export type TextLinkVariant = "accent" | "plain";
+/** Options for {@link linkClasses}. */
+export type LinkClassOptions = {
+    variant?: TextLinkVariant | undefined;
+    className?: string | undefined;
+};
+/**
+ * @function linkClasses
+ * @param opts {LinkClassOptions} variant (default "accent") and extra classes
+ * @returns {string} the text link classes, with the caller's className appended last (it
+ *          replaces a built-in class that sets the same property)
+ */
+export declare const linkClasses: ({ variant, className }?: LinkClassOptions) => string;

package/dist/components/basics/linkStyles.js

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/basics/linkStyles.ts
+ * @desc Class builder for text links, shared by TextLink and any element that should look like
+ *       one: `accent` for links in running text (h1, underlined, like Prose), `plain` for names
+ *       and titles in lists and tables (bold c1, underlined on hover).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { cx } from "../../utils/cx.js";
+// The accent link is underlined at rest, so it doesn't rely on color alone (WCAG 1.4.1). A plain
+// link sits where the context says it's a link (a list of names), and underlines on hover.
+const VARIANTS = {
+    accent: "text-h1 underline underline-offset-2 transition-colors hover:text-c1",
+    plain: "font-bold text-c1 underline-offset-2 hover:underline",
+};
+/**
+ * @function linkClasses
+ * @param opts {LinkClassOptions} variant (default "accent") and extra classes
+ * @returns {string} the text link classes, with the caller's className appended last (it
+ *          replaces a built-in class that sets the same property)
+ */
+export const linkClasses = ({ variant = "accent", className } = {}) => cx(VARIANTS[variant], className);

package/dist/components/basics/tabIds.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/basics/tabIds.ts
+ * @desc The ids that tie a Tabs tab to its panel: the tab button is `<prefix>-tab-<tab>` and its
+ *       panel `<prefix>-panel-<tab>`. Pure and server-safe, so a server page can give its panels
+ *       the ids. Moved from bb.haruhime.moe (src/utils/tabs.ts).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/**
+ * @function tabId
+ * @param prefix {string} the tab list's id prefix
+ * @param tab {string} the tab
+ * @returns {string} the tab button's id
+ */
+export declare const tabId: (prefix: string, tab: string) => string;
+/**
+ * @function tabPanelId
+ * @param prefix {string} the tab list's id prefix
+ * @param tab {string} the tab
+ * @returns {string} its panel's id
+ */
+export declare const tabPanelId: (prefix: string, tab: string) => string;

package/dist/components/basics/tabIds.js

@@ -0,0 +1,23 @@
+/**
+ * @file src/components/basics/tabIds.ts
+ * @desc The ids that tie a Tabs tab to its panel: the tab button is `<prefix>-tab-<tab>` and its
+ *       panel `<prefix>-panel-<tab>`. Pure and server-safe, so a server page can give its panels
+ *       the ids. Moved from bb.haruhime.moe (src/utils/tabs.ts).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/**
+ * @function tabId
+ * @param prefix {string} the tab list's id prefix
+ * @param tab {string} the tab
+ * @returns {string} the tab button's id
+ */
+export const tabId = (prefix, tab) => `${prefix}-tab-${tab}`;
+/**
+ * @function tabPanelId
+ * @param prefix {string} the tab list's id prefix
+ * @param tab {string} the tab
+ * @returns {string} its panel's id
+ */
+export const tabPanelId = (prefix, tab) => `${prefix}-panel-${tab}`;

package/dist/components/filters/Chip.d.ts

@@ -2,24 +2,32 @@
  * @file src/components/filters/Chip.tsx
  * @desc Toggle pill (osu! beatmap listing style): a `<button>` with `aria-pressed`, pink when on.
  *       Same look as the mod chips on packs.haruhime.moe. In forced-colors mode a pressed chip
- *       takes the system highlight colors, so on and off still look different.
+ *       takes the system highlight colors, so on and off still look different. With
+ *       `unavailableReason` it is blocked but stays focusable (aria-disabled), and screen readers
+ *       hear the reason as its description.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
-import type { ComponentProps } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 /** Every native `<button>` prop (including `ref`), plus the pressed state and its handler. */
 export type ChipProps = Omit<ComponentProps<"button">, "aria-pressed"> & {
     /** Whether the chip is on. */
     pressed: boolean;
     /** Called with the new state when the chip is clicked (or toggled with Enter or Space). */
     onPressedChange?: ((pressed: boolean) => void) | undefined;
+    /**
+     * Why the chip can't be pressed right now (EZ with HR picked). The chip is blocked but stays
+     * in the tab order (aria-disabled), and the reason is its description (and its title).
+     */
+    unavailableReason?: ReactNode;
 };
 /**
  * @function Chip
  * @param props {ChipProps} native button props, plus `pressed` and an optional `onPressedChange`.
  *        A caller's `onClick` runs first; calling `event.preventDefault()` in it skips the toggle.
  *        Callbacks can only be passed from client code.
- * @returns {JSX.Element} a `<button type="button" aria-pressed>` styled as a pill
+ * @returns {JSX.Element} a `<button type="button" aria-pressed>` styled as a pill, and the
+ *          screen-reader-only reason beside it when it is unavailable
  */
-export declare function Chip({ pressed, onPressedChange, onClick, className, type, ...props }: ChipProps): import("react").JSX.Element;
+export declare function Chip({ pressed, onPressedChange, unavailableReason, onClick, className, type, title, "aria-describedby": describedBy, ...props }: ChipProps): import("react").JSX.Element;