@haruhimemoe/ui 0.2.0 → 0.4.0

package/dist/components/filters/rangeMath.js

@@ -0,0 +1,146 @@
+/**
+ * @file src/components/filters/rangeMath.ts
+ * @desc RangeSlider's math (internal), free of React so it tests on its own: guarded bounds and
+ *       step, the incoming range normalized, snapping, the thumbs' keyboard moves, which end a
+ *       drag moves, and what a typed box or a thumb move commits.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+const decimalsOf = (n) => {
+    const text = String(n);
+    const dot = text.indexOf(".");
+    return dot === -1 ? 0 : text.length - dot - 1;
+};
+const clamp = (n, low, high) => Math.min(Math.max(n, low), high);
+/**
+ * @function defaultParse
+ * @param text {string} a typed value, without a trailing "+"
+ * @returns {number | null} the number, reading a comma as the decimal point (comma-locale keypads
+ *          type "5,5"), or null when it isn't one
+ */
+export const defaultParse = (text) => {
+    const n = Number(text.replace(",", "."));
+    return Number.isFinite(n) ? n : null;
+};
+/**
+ * @function rangeBounds
+ * @param min {number} the low bound as passed
+ * @param max {number} the high bound as passed
+ * @param step {number} the step as passed
+ * @returns {RangeBounds} the bounds in order (swapped when `max < min`) and the step, or 1 when
+ *          the step is 0, negative or not finite, so snapping never divides by zero
+ */
+export const rangeBounds = (min, max, step) => {
+    const [low, high] = min <= max ? [min, max] : [max, min];
+    const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+    return {
+        min: low,
+        max: high,
+        step: safeStep,
+        decimals: Math.max(decimalsOf(safeStep), decimalsOf(low)),
+    };
+};
+/**
+ * @function normalizeRange
+ * @param value {Readonly<RangeSliderValue>} the range as it came in (from a URL, say)
+ * @param bounds {RangeBounds} the guarded bounds
+ * @param openEnded {boolean} whether a top end at `max` means no upper limit
+ * @returns {RangeState} both ends inside the bounds with low <= high. A NaN or infinite end means
+ *          no limit on that end, like an empty box.
+ */
+export const normalizeRange = (value, { min, max }, openEnded) => {
+    const low = Number.isFinite(value[0]) ? clamp(value[0], min, max) : min;
+    const top = value[1] !== null && Number.isFinite(value[1]) ? value[1] : null;
+    const highOpen = openEnded && (top === null || top >= max);
+    const high = top === null ? max : clamp(top, low, max);
+    return { low, high, highOpen, highOut: highOpen ? null : high };
+};
+/**
+ * @function snap
+ * @param n {number} a value
+ * @param bounds {RangeBounds} the guarded bounds
+ * @returns {number} the nearest step from `min`, rounded to the step's decimals (no float noise)
+ */
+export const snap = (n, { min, step, decimals }) => Number((min + Math.round((n - min) / step) * step).toFixed(decimals));
+/**
+ * @function percent
+ * @param n {number} a value inside the bounds
+ * @param bounds {RangeBounds} the guarded bounds
+ * @returns {number} where it sits on the track, 0 to 100 (0 when `min` equals `max`)
+ */
+export const percent = (n, { min, max }) => max === min ? 0 : ((n - min) / (max - min)) * 100;
+/**
+ * @function thumbTarget
+ * @param key {string} the key pressed on a thumb
+ * @param current {number} that thumb's value
+ * @param bounds {RangeBounds} the guarded bounds
+ * @returns {number | undefined} where the key sends the thumb (arrows one step, Page Up/Down ten
+ *          steps, Home and End to the bounds), or undefined for any other key
+ */
+export const thumbTarget = (key, current, { min, max, step }) => {
+    const moves = {
+        ArrowLeft: current - step,
+        ArrowDown: current - step,
+        ArrowRight: current + step,
+        ArrowUp: current + step,
+        PageDown: current - step * 10,
+        PageUp: current + step * 10,
+        Home: min,
+        End: max,
+    };
+    return moves[key];
+};
+/**
+ * @function dragEnd
+ * @param end {End} the thumb the drag started on
+ * @param n {number} the drag's first value
+ * @param state {RangeState} the range before the drag
+ * @returns {End} the end the drag moves. With both thumbs on one value, only the top thumb can be
+ *          grabbed and it can only go one way, so a first move toward the other side moves the
+ *          other end.
+ */
+export const dragEnd = (end, n, { low, high }) => {
+    if (low !== high)
+        return end;
+    if (end === "high" && n < low)
+        return "low";
+    if (end === "low" && n > high)
+        return "high";
+    return end;
+};
+/**
+ * @function nextRange
+ * @param end {End} the end that moves
+ * @param n {number} where it moves to, before snapping
+ * @param state {RangeState} the range now
+ * @param bounds {RangeBounds} the guarded bounds
+ * @param openEnded {boolean} whether a top end at `max` reports null
+ * @returns {RangeSliderValue | null} the new range (snapped, the thumbs uncrossed, an open top
+ *          end as null), or null when nothing changed
+ */
+export const nextRange = (end, n, state, bounds, openEnded) => {
+    if (end === "low") {
+        const next = clamp(snap(n, bounds), bounds.min, state.high);
+        return next === state.low ? null : [next, state.highOut];
+    }
+    const snapped = clamp(snap(n, bounds), state.low, bounds.max);
+    const next = openEnded && (n >= bounds.max || snapped >= bounds.max) ? null : snapped;
+    return next === state.highOut ? null : [state.low, next];
+};
+/**
+ * @function readDraft
+ * @param draft {string} what was typed in an end's box
+ * @param end {End} which box
+ * @param bounds {RangeBounds} the guarded bounds
+ * @param parse {(text: string) => number | null} the caller's reader
+ * @returns {number | null} the value to commit: an empty box is no limit on that end (`min` or
+ *          `max`), a trailing "+" is ignored, and text `parse` can't read gives null
+ */
+export const readDraft = (draft, end, { min, max }, parse) => {
+    const trimmed = draft.trim().replace(/\+$/, "").trim();
+    if (trimmed === "")
+        return end === "low" ? min : max;
+    const n = parse(trimmed);
+    return n !== null && Number.isFinite(n) ? n : null;
+};

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

@@ -1,11 +1,12 @@
 /**
  * @file src/components/forms/Checkbox.tsx
  * @desc Checkbox with a bold label and an inline hint (the packs download-options look). The whole
- *       row toggles it; the label alone is its accessible name and the hint its description.
- *       Server-safe: the required id names the label, hint and error.
+ *       row toggles it; the label alone is its accessible name (plus any aria-labelledby the
+ *       caller adds) and the hint its description. Server-safe: the required id names the label,
+ *       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";
@@ -17,4 +18,4 @@ export type CheckboxProps = Omit<ComponentProps<"input">, "id" | "type"> & Field
  *        plus id, label, hint, error and wrapperClassName; `className` goes on the `<input>`
  * @returns {JSX.Element} the checkbox row, and the error under it when given
  */
-export declare function Checkbox({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-labelledby": labelledBy, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/forms/Checkbox.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
-import { FieldError, fieldDescribedBy, hintId } from "./FieldFrame.js";
+import { FieldError, fieldControlProps, hintId } from "./FieldFrame.js";
 /**
  * @function Checkbox
  * @param props {CheckboxProps} native input props (`checked`, `defaultChecked`, `onChange`...),
  *        plus id, label, hint, error and wrapperClassName; `className` goes on the `<input>`
  * @returns {JSX.Element} the checkbox row, and the error under it when given
  */
-export function Checkbox({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }) {
+export function Checkbox({ id, label, hint, error, wrapperClassName, className, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-labelledby": labelledBy, ...props }) {
     const labelId = `${id}-label`;
-    return (_jsxs("div", { className: cx("flex flex-col gap-1", wrapperClassName), children: [_jsxs("label", { htmlFor: id, className: "flex items-start gap-2 text-sm", children: [_jsx("input", { ...props, type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": fieldDescribedBy(id, hint, error, describedBy), "aria-invalid": error ? true : invalid, className: cx("mt-1 accent-h1", className) }), _jsxs("span", { children: [_jsx("span", { id: labelId, className: "font-bold text-c1", children: label }), hint ? (_jsxs("span", { className: "text-c3", children: [" · ", _jsx("span", { id: hintId(id), children: hint })] })) : null] })] }), _jsx(FieldError, { id: id, error: error })] }));
+    return (_jsxs("div", { className: cx("flex flex-col gap-1", wrapperClassName), children: [_jsxs("label", { htmlFor: id, className: "flex items-start gap-2 text-sm", children: [_jsx("input", { ...props, type: "checkbox", ...fieldControlProps({ id, hint, error, describedBy, invalid }), "aria-labelledby": labelledBy ? `${labelId} ${labelledBy}` : labelId, className: cx("mt-1 accent-h1", className) }), _jsxs("span", { children: [_jsx("span", { id: labelId, className: "font-bold text-c1", children: label }), hint ? (_jsxs("span", { className: "text-c3", children: [" · ", _jsx("span", { id: hintId(id), children: hint })] })) : null] })] }), _jsx(FieldError, { id: id, error: error })] }));
 }

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

@@ -3,11 +3,13 @@
  * @desc Internal layout shared by the form fields: label on top, the control, then the hint and
  *       the error. Ids derive from the control's required id, so the fields need no useId and stay
  *       server components. The hint and error sit in `<div>`s, so they can hold a list.
+ *       `fieldControlProps` is the one rule for the control's id, aria-describedby and
+ *       aria-invalid.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Mon Sep 28, 2026
  */
-import type { ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 /** The label, hint and error every form field takes, keyed on the control's required id. */
 export type FieldProps = {
     /** The control's id. The label points at it; the hint and error get `<id>-hint`, `<id>-error`. */
@@ -42,6 +44,30 @@ export declare const errorId: (id: string) => string;
  * @returns {string | undefined} the aria-describedby value, or undefined when there is nothing
  */
 export declare const fieldDescribedBy: (id: string, hint: ReactNode, error: ReactNode, extra: string | undefined) => string | undefined;
+/** What a field knows when it wires up its control: ids, texts, and the caller's own ARIA. */
+type FieldControlInput = {
+    id: string;
+    hint: ReactNode;
+    error: ReactNode;
+    /** The caller's own aria-describedby, kept after the hint and error ids. */
+    describedBy: string | undefined;
+    /** The caller's own aria-invalid, used when there is no error. */
+    invalid: ComponentProps<"input">["aria-invalid"];
+};
+/** The id and ARIA props a field puts on its control. */
+type FieldControlProps = {
+    id: string;
+    "aria-describedby": string | undefined;
+    "aria-invalid": FieldControlInput["invalid"];
+};
+/**
+ * @function fieldControlProps
+ * @param input {FieldControlInput} the control's id, its hint and error, and the caller's
+ *        aria-describedby and aria-invalid
+ * @returns {FieldControlProps} the props every field puts on its control: an error sets
+ *          aria-invalid, and the hint and error are linked before the caller's own descriptions
+ */
+export declare const fieldControlProps: ({ id, hint, error, describedBy, invalid, }: FieldControlInput) => FieldControlProps;
 /**
  * @function FieldError
  * @param props {{ id: string; error?: ReactNode }} the control's id and the error, if any

package/dist/components/forms/FieldFrame.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/cx.js";
+import { FIELD_LABEL } from "./fieldStyles.js";
 /**
  * @function hintId
  * @param id {string} the control's id
@@ -24,6 +25,18 @@ export const fieldDescribedBy = (id, hint, error, extra) =>
 // A plain join, not cx: these are ids, and cx would treat an id like "text-hint" as a class.
 [hint ? hintId(id) : null, error ? errorId(id) : null, extra].filter(Boolean).join(" ") ||
     undefined;
+/**
+ * @function fieldControlProps
+ * @param input {FieldControlInput} the control's id, its hint and error, and the caller's
+ *        aria-describedby and aria-invalid
+ * @returns {FieldControlProps} the props every field puts on its control: an error sets
+ *          aria-invalid, and the hint and error are linked before the caller's own descriptions
+ */
+export const fieldControlProps = ({ id, hint, error, describedBy, invalid, }) => ({
+    id,
+    "aria-describedby": fieldDescribedBy(id, hint, error, describedBy),
+    "aria-invalid": error ? true : invalid,
+});
 /**
  * @function FieldError
  * @param props {{ id: string; error?: ReactNode }} the control's id and the error, if any
@@ -40,5 +53,5 @@ export function FieldError({ id, error }) {
  * @returns {JSX.Element} the label, control, hint and error stacked in a column
  */
 export function FieldFrame({ id, label, hint, error, className, children }) {
-    return (_jsxs("div", { className: cx("flex flex-col gap-1", className), children: [_jsx("label", { htmlFor: id, className: "font-bold text-c3 text-sm", children: label }), children, hint ? (_jsx("div", { id: hintId(id), className: "text-c4 text-xs", children: hint })) : null, _jsx(FieldError, { id: id, error: error })] }));
+    return (_jsxs("div", { className: cx("flex flex-col gap-1", className), children: [_jsx("label", { htmlFor: id, className: FIELD_LABEL, children: label }), children, hint ? (_jsx("div", { id: hintId(id), className: "text-c4 text-xs", children: hint })) : null, _jsx(FieldError, { id: id, error: error })] }));
 }

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/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/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/icons/DiscordIcon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file src/components/icons/DiscordIcon.tsx
+ * @desc The Discord logo as a static inline SVG (no icon library, no external request), in the
+ *       current text color. Always decorative: label the link around it. The path is Simple
+ *       Icons' discord.svg at tag 16.32.0 (https://github.com/simple-icons/simple-icons, CC0
+ *       1.0). Discord is a trademark of Discord Inc. Its brand guidelines ask for the logo in
+ *       color, black or white and not recolored, so set one of those as the text color.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Fri Sep 25, 2026
+ * @modified Fri Sep 25, 2026
+ */
+import type { ComponentProps } from "react";
+/** Every native `<svg>` prop except children and viewBox. */
+export type DiscordIconProps = Omit<ComponentProps<"svg">, "children" | "viewBox">;
+/**
+ * @function DiscordIcon
+ * @param props {DiscordIconProps} native svg props; `className` replaces the default size
+ *        ("size-5")
+ * @returns {JSX.Element} the Discord logo in the current text color, hidden from assistive tech
+ */
+export declare function DiscordIcon({ className, ...props }: DiscordIconProps): import("react").JSX.Element;

package/dist/components/icons/DiscordIcon.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @function DiscordIcon
+ * @param props {DiscordIconProps} native svg props; `className` replaces the default size
+ *        ("size-5")
+ * @returns {JSX.Element} the Discord logo in the current text color, hidden from assistive tech
+ */
+export function DiscordIcon({ className = "size-5", ...props }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: className, fill: "currentColor", ...props, children: _jsx("path", { d: "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" }) }));
+}

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. */