@haruhimemoe/ui 0.3.0 → 0.5.0

package/dist/components/forms/RadioGroup.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @file src/components/forms/RadioGroup.tsx
+ * @desc A native radio group on the Checkbox look: a fieldset named by its legend, one radio per
+ *       option with a bold label and an inline hint, then the group's hint and error. Each
+ *       option's label is its accessible name and its hint the description; the group's hint and
+ *       error describe the fieldset, and an error marks it invalid. Arrow keys move and pick, as
+ *       native radios do. Controlled (`value`) or uncontrolled (`defaultValue`).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+/** One radio: its value, its label, an optional inline hint, and whether it can be picked. */
+export type RadioOption = {
+    value: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    disabled?: boolean | undefined;
+};
+/** Every native `<fieldset>` prop except `onChange` and `children`, plus the group's parts. */
+export type RadioGroupProps = Omit<ComponentProps<"fieldset">, "onChange" | "children" | "defaultValue"> & {
+    /** The legend, which names the group. */
+    label: ReactNode;
+    options: readonly RadioOption[];
+    /** The radios' name, for a form (default: a generated one). */
+    name?: string | undefined;
+    /** The picked value, when the caller holds it. */
+    value?: string | undefined;
+    /** The value picked at first, when the group holds it. */
+    defaultValue?: string | undefined;
+    /** Called with the picked option's value. */
+    onChange?: ((value: string) => void) | undefined;
+    /** Help text under the options, linked to the group with aria-describedby. */
+    hint?: ReactNode;
+    /** Error text under the options (a list is fine). Marks the group invalid and links it. */
+    error?: ReactNode;
+    /** Every radio gets `required`, so a form won't submit without a pick. */
+    required?: boolean | undefined;
+};
+/**
+ * @function RadioGroup
+ * @param props {RadioGroupProps} the legend, options, value or defaultValue, a change handler,
+ *        the group's hint and error, plus native fieldset props (`disabled` turns off every radio)
+ * @returns {JSX.Element} a `<fieldset>` with its `<legend>`, the radios, and the hint and error
+ */
+export declare function RadioGroup({ label, options, name, value, defaultValue, onChange, hint, error, required, className, "aria-describedby": describedBy, ...props }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/forms/RadioGroup.js

@@ -0,0 +1,32 @@
+/**
+ * @file src/components/forms/RadioGroup.tsx
+ * @desc A native radio group on the Checkbox look: a fieldset named by its legend, one radio per
+ *       option with a bold label and an inline hint, then the group's hint and error. Each
+ *       option's label is its accessible name and its hint the description; the group's hint and
+ *       error describe the fieldset, and an error marks it invalid. Arrow keys move and pick, as
+ *       native radios do. Controlled (`value`) or uncontrolled (`defaultValue`).
+ * @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 } from "react";
+import { cx } from "../../utils/cx.js";
+import { FieldError, fieldDescribedBy, hintId } from "./FieldFrame.js";
+import { FIELD_LABEL } from "./fieldStyles.js";
+/**
+ * @function RadioGroup
+ * @param props {RadioGroupProps} the legend, options, value or defaultValue, a change handler,
+ *        the group's hint and error, plus native fieldset props (`disabled` turns off every radio)
+ * @returns {JSX.Element} a `<fieldset>` with its `<legend>`, the radios, and the hint and error
+ */
+export function RadioGroup({ label, options, name, value, defaultValue, onChange, hint, error, required, className, "aria-describedby": describedBy, ...props }) {
+    const id = useId();
+    return (_jsxs("fieldset", { "aria-describedby": fieldDescribedBy(id, hint, error, describedBy), className: cx("flex flex-col gap-2", className), ...props, children: [_jsx("legend", { className: cx("mb-1", FIELD_LABEL), children: label }), options.map((option, i) => {
+                const optionId = `${id}-${i}`;
+                return (_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "radio", id: optionId, name: name ?? id, value: option.value, ...(value === undefined
+                                ? { defaultChecked: option.value === defaultValue }
+                                : { checked: option.value === value }), disabled: option.disabled, required: required, "aria-invalid": error ? true : undefined, "aria-labelledby": `${optionId}-label`, "aria-describedby": option.hint ? hintId(optionId) : undefined, onChange: () => onChange?.(option.value), className: "mt-1 accent-h1" }), _jsxs("span", { children: [_jsx("span", { id: `${optionId}-label`, className: "font-bold text-c1", children: option.label }), option.hint ? (_jsxs("span", { className: "text-c3", children: [" · ", _jsx("span", { id: hintId(optionId), children: option.hint })] })) : null] })] }, option.value));
+            }), hint ? (_jsx("div", { id: hintId(id), className: "text-c4 text-xs", children: hint })) : null, _jsx(FieldError, { id: id, error: error })] }));
+}

package/dist/components/forms/ReportDisclosure.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @file src/components/forms/ReportDisclosure.tsx
+ * @desc "Report this": a Disclosure holding a reason field and a submit button. The caller sends
+ *       the reason (`onSubmit`) and says how it went: done (the form goes away and the page says
+ *       so, thanks or "already reported") or an error (shown on the field, for a retry). One send
+ *       at a time; a throw reads as `failedMessage`. Moved from bb.haruhime.moe (ReportForm).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ReactNode } from "react";
+/** What `onSubmit` says: done (with what to say) or not (with the error). */
+export type ReportResult = {
+    ok: true;
+    message?: ReactNode;
+} | {
+    ok: false;
+    message: ReactNode;
+};
+/** ReportDisclosure's props. */
+export type ReportDisclosureProps = {
+    /** Sends the trimmed reason. */
+    onSubmit: (reason: string) => Promise<ReportResult>;
+    /** The disclosure button's text (default "Report"). */
+    summary?: ReactNode;
+    /** The reason field's label (default "What's wrong with it?"). */
+    label?: ReactNode;
+    /** Help under the field. */
+    hint?: ReactNode;
+    /** The submit button's text (default "Send report"). */
+    submitLabel?: ReactNode;
+    /** The submit button's text while sending (default "Sending…"). */
+    pendingLabel?: ReactNode;
+    /** Said once sent, when the result has no message (default "Thanks. Your report was sent."). */
+    sentMessage?: ReactNode;
+    /** Said when `onSubmit` throws (default "Couldn't send the report. Try again."). */
+    failedMessage?: ReactNode;
+    /** The reason's shortest length (default 3). */
+    minLength?: number | undefined;
+    /** The reason's longest length. */
+    maxLength?: number | undefined;
+    /** The field's height in rows (default 3). */
+    rows?: number | undefined;
+    /** Classes for the wrapper. */
+    className?: string | undefined;
+};
+/**
+ * @function ReportDisclosure
+ * @param props {ReportDisclosureProps} the send callback, the words and the reason's limits
+ * @returns {JSX.Element} the disclosure with its form, or the status once sent
+ */
+export declare function ReportDisclosure({ onSubmit, summary, label, hint, submitLabel, pendingLabel, sentMessage, failedMessage, minLength, maxLength, rows, className, }: ReportDisclosureProps): import("react").JSX.Element;

package/dist/components/forms/ReportDisclosure.js

@@ -0,0 +1,54 @@
+/**
+ * @file src/components/forms/ReportDisclosure.tsx
+ * @desc "Report this": a Disclosure holding a reason field and a submit button. The caller sends
+ *       the reason (`onSubmit`) and says how it went: done (the form goes away and the page says
+ *       so, thanks or "already reported") or an error (shown on the field, for a retry). One send
+ *       at a time; a throw reads as `failedMessage`. Moved from bb.haruhime.moe (ReportForm).
+ * @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, useRef, useState } from "react";
+import { cx } from "../../utils/cx.js";
+import { Button } from "../basics/Button.js";
+import { Disclosure } from "../basics/Disclosure.js";
+import { Textarea } from "./Textarea.js";
+/**
+ * @function ReportDisclosure
+ * @param props {ReportDisclosureProps} the send callback, the words and the reason's limits
+ * @returns {JSX.Element} the disclosure with its form, or the status once sent
+ */
+export function ReportDisclosure({ onSubmit, summary = "Report", label = "What's wrong with it?", hint, submitLabel = "Send report", pendingLabel = "Sending…", sentMessage = "Thanks. Your report was sent.", failedMessage = "Couldn't send the report. Try again.", minLength = 3, maxLength, rows = 3, className, }) {
+    const id = useId();
+    const [reason, setReason] = useState("");
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const [done, setDone] = useState(null);
+    const running = useRef(false);
+    if (done !== null) {
+        return (_jsx("p", { role: "status", className: cx("text-c2 text-sm", className), children: done }));
+    }
+    const send = async (event) => {
+        event.preventDefault();
+        if (running.current)
+            return;
+        running.current = true;
+        setPending(true);
+        setError(null);
+        try {
+            const result = await onSubmit(reason.trim());
+            if (result.ok)
+                setDone(result.message ?? sentMessage);
+            else
+                setError(result.message);
+        }
+        catch {
+            setError(failedMessage);
+        }
+        running.current = false;
+        setPending(false);
+    };
+    return (_jsx(Disclosure, { summary: summary, className: className, children: _jsxs("form", { className: "flex flex-col gap-2", onSubmit: send, children: [_jsx(Textarea, { id: `${id}-reason`, label: label, hint: hint, error: error ?? undefined, value: reason, rows: rows, minLength: minLength, maxLength: maxLength, required: true, onChange: (event) => setReason(event.currentTarget.value) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: pending, className: "self-start", children: pending ? pendingLabel : submitLabel })] }) }));
+}

package/dist/components/forms/Select.d.ts

@@ -4,7 +4,7 @@
  *       through aria-describedby and aria-invalid. Options come in as children. Server-safe.
  * @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 FieldProps } from "./FieldFrame.js";

package/dist/components/forms/Select.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FieldFrame, fieldDescribedBy } from "./FieldFrame.js";
+import { FieldFrame, fieldControlProps } from "./FieldFrame.js";
 import { fieldClasses } from "./fieldStyles.js";
 /**
  * @function Select
@@ -8,5 +8,5 @@ import { fieldClasses } from "./fieldStyles.js";
  * @returns {JSX.Element} a label, the select, and the hint and error when given
  */
 export function Select({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }) {
-    return (_jsx(FieldFrame, { id: id, label: label, hint: hint, error: error, className: wrapperClassName, children: _jsx("select", { ...props, id: id, "aria-describedby": fieldDescribedBy(id, hint, error, describedBy), "aria-invalid": error ? true : invalid, className: fieldClasses(className) }) }));
+    return (_jsx(FieldFrame, { id: id, label: label, hint: hint, error: error, className: wrapperClassName, children: _jsx("select", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(className) }) }));
 }

package/dist/components/forms/TextInput.d.ts

@@ -4,7 +4,7 @@
  *       aria-describedby and aria-invalid. Server-safe: the required id names the hint and error.
  * @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 FieldProps } from "./FieldFrame.js";

package/dist/components/forms/TextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FieldFrame, fieldDescribedBy } from "./FieldFrame.js";
+import { FieldFrame, fieldControlProps } from "./FieldFrame.js";
 import { fieldClasses } from "./fieldStyles.js";
 /**
  * @function TextInput
@@ -8,5 +8,5 @@ import { fieldClasses } from "./fieldStyles.js";
  * @returns {JSX.Element} a label, the input, and the hint and error when given
  */
 export function TextInput({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }) {
-    return (_jsx(FieldFrame, { id: id, label: label, hint: hint, error: error, className: wrapperClassName, children: _jsx("input", { ...props, id: id, "aria-describedby": fieldDescribedBy(id, hint, error, describedBy), "aria-invalid": error ? true : invalid, className: fieldClasses(className) }) }));
+    return (_jsx(FieldFrame, { id: id, label: label, hint: hint, error: error, className: wrapperClassName, children: _jsx("input", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(className) }) }));
 }

package/dist/components/forms/Textarea.d.ts

@@ -4,7 +4,7 @@
  *       an optional hint and error wired through aria-describedby and aria-invalid. Server-safe.
  * @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 FieldProps } from "./FieldFrame.js";

package/dist/components/forms/Textarea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
-import { FieldFrame, fieldDescribedBy } from "./FieldFrame.js";
+import { FieldFrame, fieldControlProps } from "./FieldFrame.js";
 import { fieldClasses } from "./fieldStyles.js";
 /**
  * @function Textarea
@@ -9,5 +9,5 @@ import { fieldClasses } from "./fieldStyles.js";
  * @returns {JSX.Element} a label, the textarea, and the hint and error when given
  */
 export function Textarea({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }) {
-    return (_jsx(FieldFrame, { id: id, label: label, hint: hint, error: error, className: wrapperClassName, children: _jsx("textarea", { ...props, id: id, "aria-describedby": fieldDescribedBy(id, hint, error, describedBy), "aria-invalid": error ? true : invalid, className: fieldClasses(cx("min-h-24 resize-y", className)) }) }));
+    return (_jsx(FieldFrame, { id: id, label: label, hint: hint, error: error, className: wrapperClassName, children: _jsx("textarea", { ...props, ...fieldControlProps({ id, hint, error, describedBy, invalid }), className: fieldClasses(cx("min-h-24 resize-y", className)) }) }));
 }

package/dist/components/forms/TypeToConfirm.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @file src/components/forms/TypeToConfirm.tsx
+ * @desc A confirm for something that can't be undone (delete a pool, hand it to someone else):
+ *       a form whose submit button stays off until the expected name is typed exactly, with no
+ *       autocomplete or spellcheck in the way. Enter submits once it matches. The pools
+ *       delete and transfer forms, as one component.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ComponentProps, type ReactNode } from "react";
+import type { ButtonVariant } from "../basics/buttonStyles.js";
+/** Every native `<form>` prop except `onSubmit`, plus the name to type and the action. */
+export type TypeToConfirmProps = Omit<ComponentProps<"form">, "onSubmit"> & {
+    /** The text field's id; its hint and error get `<id>-hint` and `<id>-error`. */
+    id: string;
+    /** What has to be typed, exactly (spaces around it don't count). */
+    expected: string;
+    /** The field's label. Default "Type <expected> to confirm". */
+    label?: ReactNode;
+    /** Help text under the field. */
+    hint?: ReactNode;
+    /** Error text under the field, e.g. when the action failed. */
+    error?: ReactNode;
+    /** The submit button's text, e.g. "Delete this pool". */
+    submitLabel: ReactNode;
+    /** The submit button's text while `onConfirm` runs. Defaults to `submitLabel`. */
+    pendingLabel?: ReactNode;
+    /** Runs on submit once the text matches. */
+    onConfirm: () => void | Promise<void>;
+    /** The submit button's look (default "secondary"). */
+    variant?: ButtonVariant | undefined;
+};
+/**
+ * @function TypeToConfirm
+ * @param props {TypeToConfirmProps} the id, the expected text, the labels, the action, and native
+ *        form props; children show above the field (what the action does)
+ * @returns {JSX.Element} a `<form>` with the children, the text field and the submit button
+ */
+export declare function TypeToConfirm({ id, expected, label, hint, error, submitLabel, pendingLabel, onConfirm, variant, className, children, ...props }: TypeToConfirmProps): import("react").JSX.Element;

package/dist/components/forms/TypeToConfirm.js

@@ -0,0 +1,46 @@
+/**
+ * @file src/components/forms/TypeToConfirm.tsx
+ * @desc A confirm for something that can't be undone (delete a pool, hand it to someone else):
+ *       a form whose submit button stays off until the expected name is typed exactly, with no
+ *       autocomplete or spellcheck in the way. Enter submits once it matches. The pools
+ *       delete and transfer forms, as one component.
+ * @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 { useRef, useState } from "react";
+import { cx } from "../../utils/cx.js";
+import { Button } from "../basics/Button.js";
+import { TextInput } from "./TextInput.js";
+/**
+ * @function TypeToConfirm
+ * @param props {TypeToConfirmProps} the id, the expected text, the labels, the action, and native
+ *        form props; children show above the field (what the action does)
+ * @returns {JSX.Element} a `<form>` with the children, the text field and the submit button
+ */
+export function TypeToConfirm({ id, expected, label = `Type ${expected} to confirm`, hint, error, submitLabel, pendingLabel, onConfirm, variant = "secondary", className, children, ...props }) {
+    const [typed, setTyped] = useState("");
+    const [pending, setPending] = useState(false);
+    const running = useRef(false);
+    const matches = typed.trim() === expected.trim();
+    const submit = async (event) => {
+        event.preventDefault();
+        if (!matches || running.current)
+            return;
+        running.current = true;
+        setPending(true);
+        try {
+            await onConfirm();
+        }
+        catch {
+            // The caller says what went wrong through `error`; the form stays as typed for a retry.
+        }
+        finally {
+            running.current = false;
+            setPending(false);
+        }
+    };
+    return (_jsxs("form", { onSubmit: submit, className: cx("flex flex-col gap-3", className), ...props, children: [children, _jsx(TextInput, { id: id, label: label, hint: hint, error: error, value: typed, autoComplete: "off", autoCapitalize: "off", spellCheck: false, onChange: (event) => setTyped(event.currentTarget.value) }), _jsx(Button, { type: "submit", variant: variant, className: "self-start", disabled: !matches || pending, children: pending && pendingLabel !== undefined ? pendingLabel : submitLabel })] }));
+}

package/dist/components/forms/VisibilitySelect.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @file src/components/forms/VisibilitySelect.tsx
+ * @desc Who can see something: private, unlisted or public, each with a line saying who that is.
+ *       As radios (RadioGroup, every option's line shown) or as a native select (Select, the
+ *       picked option's line as the hint). Controlled. The pools pool editor and the bb template
+ *       forms, as one component; the words come from props, with generic defaults.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ReactNode } from "react";
+/** The three visibilities, from most to least closed. */
+export declare const VISIBILITIES: readonly ["private", "unlisted", "public"];
+/** One of VISIBILITIES. */
+export type Visibility = (typeof VISIBILITIES)[number];
+/** A visibility's name and the line that says who sees it. */
+export type VisibilityText = {
+    label: string;
+    hint?: ReactNode;
+};
+/** The default words, generic English. */
+export declare const VISIBILITY_TEXT: Readonly<Record<Visibility, VisibilityText>>;
+/** VisibilitySelect's props. */
+export type VisibilitySelectProps = {
+    /** The picked visibility. */
+    value: Visibility;
+    /** Called with the new visibility. */
+    onChange: (value: Visibility) => void;
+    /** The group's legend or the select's label (default "Who can see it"). */
+    label?: ReactNode;
+    /** "radio" (default) shows every option's line; "select" is a dropdown. */
+    as?: "radio" | "select" | undefined;
+    /** Words per visibility, merged over VISIBILITY_TEXT. */
+    text?: Partial<Record<Visibility, Partial<VisibilityText>>> | undefined;
+    /** The select's id, or the radios' name (default: generated). */
+    id?: string | undefined;
+    /** Help under the radios; for a select, replaces the picked option's line. */
+    hint?: ReactNode;
+    /** Error text; marks the field invalid. */
+    error?: ReactNode;
+    /** Turns the field off. */
+    disabled?: boolean | undefined;
+    /** Classes for the fieldset, or the select's wrapper. */
+    className?: string | undefined;
+};
+/**
+ * @function VisibilitySelect
+ * @param props {VisibilitySelectProps} the value, the handler, the look, the words, id, hint,
+ *        error and disabled
+ * @returns {JSX.Element} a RadioGroup of the three, or a Select with the picked one's line
+ */
+export declare function VisibilitySelect({ value, onChange, label, as, text, id, hint, error, disabled, className, }: VisibilitySelectProps): import("react").JSX.Element;

package/dist/components/forms/VisibilitySelect.js

@@ -0,0 +1,45 @@
+/**
+ * @file src/components/forms/VisibilitySelect.tsx
+ * @desc Who can see something: private, unlisted or public, each with a line saying who that is.
+ *       As radios (RadioGroup, every option's line shown) or as a native select (Select, the
+ *       picked option's line as the hint). Controlled. The pools pool editor and the bb template
+ *       forms, as one component; the words come from props, with generic defaults.
+ * @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 { useId } from "react";
+import { RadioGroup } from "./RadioGroup.js";
+import { Select } from "./Select.js";
+/** The three visibilities, from most to least closed. */
+export const VISIBILITIES = ["private", "unlisted", "public"];
+/** The default words, generic English. */
+export const VISIBILITY_TEXT = {
+    private: { label: "Private", hint: "Only you can see it." },
+    unlisted: { label: "Unlisted", hint: "Anyone with the link can see it. It isn't listed." },
+    public: { label: "Public", hint: "Anyone can see it, and it's listed." },
+};
+const isVisibility = (value) => VISIBILITIES.includes(value);
+/**
+ * @function VisibilitySelect
+ * @param props {VisibilitySelectProps} the value, the handler, the look, the words, id, hint,
+ *        error and disabled
+ * @returns {JSX.Element} a RadioGroup of the three, or a Select with the picked one's line
+ */
+export function VisibilitySelect({ value, onChange, label = "Who can see it", as = "radio", text, id, hint, error, disabled, className, }) {
+    const generated = useId();
+    const words = (visibility) => ({
+        ...VISIBILITY_TEXT[visibility],
+        ...text?.[visibility],
+    });
+    const pick = (next) => {
+        if (isVisibility(next))
+            onChange(next);
+    };
+    if (as === "select") {
+        return (_jsx(Select, { id: id ?? generated, label: label, hint: hint ?? words(value).hint, error: error, value: value, disabled: disabled, wrapperClassName: className, onChange: (event) => pick(event.currentTarget.value), children: VISIBILITIES.map((visibility) => (_jsx("option", { value: visibility, children: words(visibility).label }, visibility))) }));
+    }
+    return (_jsx(RadioGroup, { label: label, name: id, options: VISIBILITIES.map((visibility) => ({ value: visibility, ...words(visibility) })), value: value, onChange: pick, hint: hint, error: error, disabled: disabled, className: className }));
+}

package/dist/components/forms/fieldStyles.d.ts

@@ -3,11 +3,14 @@
  * @desc Shared classes for inputs, selects, and textareas (osu!-web dark fields). Focus shows as
  *       an h1 border. On an invalid field it also gets an h1 ring, since rose to pink alone is
  *       hard to see. `outline-hidden` (not `outline-none`) leaves a transparent outline that
- *       forced-colors mode paints, so focus shows there too.
+ *       forced-colors mode paints, so focus shows there too. Also the one label look that fields,
+ *       groups and filter rows share.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
+/** A field or group label: bold c3 at text-sm (internal). */
+export declare const FIELD_LABEL = "font-bold text-c3 text-sm";
 /**
  * @function fieldClasses
  * @param className {string} extra classes, appended last. One that sets the same property as a

package/dist/components/forms/fieldStyles.js

@@ -3,13 +3,16 @@
  * @desc Shared classes for inputs, selects, and textareas (osu!-web dark fields). Focus shows as
  *       an h1 border. On an invalid field it also gets an h1 ring, since rose to pink alone is
  *       hard to see. `outline-hidden` (not `outline-none`) leaves a transparent outline that
- *       forced-colors mode paints, so focus shows there too.
+ *       forced-colors mode paints, so focus shows there too. Also the one label look that fields,
+ *       groups and filter rows share.
  * @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 FIELD = "w-full rounded-md border border-b3 bg-b6 px-3 py-2 text-c1 text-sm placeholder:text-c4 focus-visible:border-h1 focus-visible:outline-hidden disabled:opacity-50 aria-invalid:border-rose-400 aria-invalid:focus-visible:border-h1 aria-invalid:focus-visible:ring-1 aria-invalid:focus-visible:ring-h1";
+/** A field or group label: bold c3 at text-sm (internal). */
+export const FIELD_LABEL = "font-bold text-c3 text-sm";
 /**
  * @function fieldClasses
  * @param className {string} extra classes, appended last. One that sets the same property as a

package/dist/components/{actions → meta}/JsonLd.d.ts

@@ -1,10 +1,10 @@
 /**
- * @file src/components/actions/JsonLd.tsx
+ * @file src/components/meta/JsonLd.tsx
  * @desc schema.org structured data as a JSON-LD script tag. Every "<" is escaped, so no string
  *       in the data (a user-supplied name, say) can close the tag or open a comment.
  * @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";
 /** Native `<script>` props (like `id` or `nonce`), plus the schema.org data. */

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 }));
+}