@haruhimemoe/ui 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.5.1] - 2026-09-28
+
+### Security
+
+- `JsonLd` also escapes `>`, `&`, U+2028 and U+2029 as JSON unicode escapes, not only `<`. The data parses back unchanged.
+
+## [0.5.0] - 2026-09-28
+
+### Added
+
+- `Tabs`: an ARIA tab list for panels on the same page. The chosen tab is the only one in the Tab order; Left and Right (wrapping), Home and End pick and focus a tab. `tabId` and `tabPanelId` give the ids that tie a tab to its panel. Moved from bb.haruhime.moe.
+- `CharCounter`: "1,234 / 60,000 characters", bold rose with how many to cut once over the limit. The caller counts. Moved from bb.haruhime.moe.
+- `VisibilitySelect`: private, unlisted or public with a line each saying who sees it, as radios or a select, with the words overridable. Also `VISIBILITIES`, `VISIBILITY_TEXT` and the `Visibility` and `VisibilityText` types. It replaces the pools pool editor's radios and bb's template selects.
+- `ReportDisclosure`: a report reason in a disclosure, sent through `onSubmit`, which returns a `ReportResult`; done replaces the form with a status line, an error stays on the field for a retry. Moved from bb.haruhime.moe (ReportForm).
+
 ## [0.4.0] - 2026-09-28
 
 ### Added
@@ -77,7 +92,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - `className` on every component, and the extras passed to `buttonClasses` and `fieldClasses`, merge with tailwind-merge: a caller's class replaces a built-in one that sets the same property (`fieldClasses("w-auto")` drops `w-full`).
 - Shell: `SiteHeader` (brand slot, nav links as data with `aria-current`, actions slot), `NavLinks`, `SiteFooter` (link columns as data, fine print, the haruhime.moe wordmark and a GitHub link) and `PageShell` (skip link, header, main, footer).
 
-[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.4.0...HEAD
+[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.5.1...HEAD
+[0.5.1]: https://github.com/haruhimemoe/ui/compare/v0.5.0...v0.5.1
+[0.5.0]: https://github.com/haruhimemoe/ui/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/haruhimemoe/ui/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/haruhimemoe/ui/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/haruhimemoe/ui/compare/v0.1.0...v0.2.0

package/README.md

@@ -6,7 +6,7 @@ React components for the haruhime.moe osu! tools on Next.js. It ships the osu!-w
 
 See every component in its states at [haruhime.moe/ui](https://www.haruhime.moe/ui). The page names the version it runs.
 
-This README describes version 0.4.0. Anything marked "since 0.4.0" is not in 0.3.0, anything marked "since 0.3.0" is not in 0.2.0, and anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
+This README describes version 0.5.0. Anything marked "since 0.5.0" is not in 0.4.0, anything marked "since 0.4.0" is not in 0.3.0, anything marked "since 0.3.0" is not in 0.2.0, and anything marked "since 0.2.0" is not in 0.1.0. [CHANGELOG.md](./CHANGELOG.md) lists what changed in each version.
 
 ## Requirements
 
@@ -153,7 +153,7 @@ export default function Home() {
 
 Import every component from `@haruhimemoe/ui`, in Server and Client Components alike.
 
-- **Client components:** `CopyButton`, `Chip`, `ChipGroup`, `RangeSlider` and `FilterPanel`, and since 0.4.0 `AsyncButton`, `InlineConfirm`, `Disclosure`, `ChoiceChips`, `RadioGroup`, `TypeToConfirm` and `HeaderMenu`. Each file starts with `"use client"`. They merge their classes with tailwind-merge in the browser, so a page that renders any of them loads tailwind-merge (about 9 KB gzipped), however its header renders.
+- **Client components:** `CopyButton`, `Chip`, `ChipGroup`, `RangeSlider` and `FilterPanel`, and since 0.4.0 `AsyncButton`, `InlineConfirm`, `Disclosure`, `ChoiceChips`, `RadioGroup`, `TypeToConfirm` and `HeaderMenu`, and since 0.5.0 `Tabs`, `VisibilitySelect` and `ReportDisclosure`. Each file starts with `"use client"`. They merge their classes with tailwind-merge in the browser, so a page that renders any of them loads tailwind-merge (about 9 KB gzipped), however its header renders.
 - **`SiteHeader` and `NavLinks`** are Server Components with a small client part (since 0.2.0; in 0.1.0 `NavLinks` is a client component). When a nav link can be the current page (a path such as `/packs`), a client list reads the path to set `aria-current`. With only external or text-only links, the nav renders on the server alone and nothing in it hydrates. Relative hrefs (`#main`) skip the client list too, but they render `next/link`, which hydrates.
 - **Everything else is server-safe:** no state, no effects, no browser APIs.
 
@@ -292,6 +292,25 @@ Since 0.4.0. A small pill for a status or tag ("Unranked", "beta", a count). A `
 | --- | --- | --- | --- |
 | `tone` | `"neutral" \| "accent" \| "warning" \| "muted"` | `"neutral"` | `neutral` is `b3` with `c2` text, `accent` is `h1` with dark bold text, `warning` is a faint amber with bold amber text, `muted` is an outlined pill in small bold capitals (a "beta" tag). |
 
+#### `Tabs` (client)
+
+Since 0.5.0. A tab list for panels on the same page (use `LinkTabs` when each tab is its own URL): pill buttons with `role="tab"` in a `role="tablist"` named by `label`. The chosen tab is `aria-selected` and the only one in the Tab order (the first one when none is chosen). Left and Right move and wrap, Home and End jump to the ends; each picks the tab and focuses it. Controlled. Every native `<div>` prop except `onChange` and `children`, for the tablist. Types: `TabItem<T>`, `TabsProps<T>`.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `label` | `string` | required | The tablist's accessible name. |
+| `idPrefix` | `string` | required | Prefix for the tabs' and panels' ids. |
+| `tabs` | `readonly { id: T; label: ReactNode }[]` | required | The tabs, left to right. |
+| `value` | `T` | required | The chosen tab's id. |
+| `onChange` | `(id: T) => void` | required | Gets the picked tab's id. |
+
+The panels are yours. `tabId(prefix, tab)` and `tabPanelId(prefix, tab)` (server-safe) give the ids that tie them together (`<prefix>-tab-<tab>`, `<prefix>-panel-<tab>`):
+
+```tsx
+<Tabs label="Editor view" idPrefix="ed" tabs={TABS} value={tab} onChange={setTab} />
+<div role="tabpanel" id={tabPanelId("ed", tab)} aria-labelledby={tabId("ed", tab)}>...</div>
+```
+
 ### Forms
 
 The fields render a label, the control, an optional hint and an optional error, wired together for screen readers. They are Server Components: you pass the `id`, so they need no generated ids.
@@ -363,6 +382,70 @@ Since 0.4.0. A confirm for something that can't be undone: a `<form>` whose subm
 </TypeToConfirm>
 ```
 
+#### `CharCounter`
+
+Since 0.5.0. How much of a length limit a text uses: "1,234 / 60,000 characters" in `c3`, then bold rose with ": 1,500 over the limit" once past it (at the limit is not over). You count, so any rule works (a string's length, a BBCode counter). Every native `<p>` prop except `children`.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `count` | `number` | required | How many are used. |
+| `limit` | `number` | required | The most allowed. |
+| `unit` | `string` | `"characters"` | What is counted. |
+
+#### `VisibilitySelect` (client)
+
+Since 0.5.0. Who can see something: private, unlisted or public, each with a line that says who that is. As radios (a `RadioGroup`, every line shown as its option's description) or as a native select (a `Select`, the picked option's line as the hint). Controlled. Also exported: `VISIBILITIES` (`["private", "unlisted", "public"]`), the `Visibility` type, `VisibilityText` (`{ label: string; hint?: ReactNode }`) and `VISIBILITY_TEXT`, the default words ("Only you can see it.", "Anyone with the link can see it. It isn't listed.", "Anyone can see it, and it's listed.").
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `value` | `Visibility` | required | The picked visibility. |
+| `onChange` | `(value: Visibility) => void` | required | Gets the new one. |
+| `label` | `ReactNode` | `"Who can see it"` | The legend, or the select's label. |
+| `as` | `"radio" \| "select"` | `"radio"` | Radios, or a dropdown. |
+| `text` | `Partial<Record<Visibility, Partial<VisibilityText>>>` | none | Your words, merged over `VISIBILITY_TEXT` per visibility. |
+| `id` | `string` | generated | The select's id, or the radios' name. |
+| `hint` | `ReactNode` | none | Under the radios. On a select it replaces the picked option's line. |
+| `error` | `ReactNode` | none | As on the fields. |
+| `disabled` | `boolean` | `false` | Turns it off. |
+| `className` | `string` | none | Classes for the fieldset, or the select's wrapper. |
+
+```tsx
+<VisibilitySelect
+  label="Who can see this pool"
+  value={visibility}
+  onChange={setVisibility}
+  text={{ private: { hint: "Only you and your editors." } }}
+/>
+```
+
+#### `ReportDisclosure` (client)
+
+Since 0.5.0. "Report this": a `Disclosure` holding a reason `Textarea` (required) and a submit button. `onSubmit` gets the trimmed reason and says how it went: `{ ok: true, message? }` replaces the form with a `role="status"` line (your message, like "You already reported it.", or `sentMessage`); `{ ok: false, message }` shows the message as the field's error and keeps what was typed for a retry. A throw reads as `failedMessage`. One send at a time. Type: `ReportResult`.
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `onSubmit` | `(reason: string) => Promise<ReportResult>` | required | Sends the report. |
+| `summary` | `ReactNode` | `"Report"` | The disclosure button's text. |
+| `label` | `ReactNode` | `"What's wrong with it?"` | The reason field's label. |
+| `hint` | `ReactNode` | none | Help under the field. |
+| `submitLabel`, `pendingLabel` | `ReactNode` | `"Send report"`, `"Sending…"` | The button's text, and while sending. |
+| `sentMessage` | `ReactNode` | `"Thanks. Your report was sent."` | Said when the result has no message. |
+| `failedMessage` | `ReactNode` | `"Couldn't send the report. Try again."` | Said when `onSubmit` throws. |
+| `minLength`, `maxLength` | `number` | `3`, none | The reason's length limits. |
+| `rows` | `number` | `3` | The field's height. |
+| `className` | `string` | none | Classes for the wrapper (or the status line once sent). |
+
+```tsx
+<ReportDisclosure
+  summary="Report this template"
+  maxLength={500}
+  onSubmit={async (reason) => {
+    const response = await fetch(`/api/templates/${id}/report`, { method: "POST", body: JSON.stringify({ reason }) });
+    return response.ok ? { ok: true } : { ok: false, message: "Reporting failed." };
+  }}
+/>
+```
+
 #### `fieldClasses`
 
 `fieldClasses(className?: string): string` returns the field look (`b6` background, `b3` border, `h1` border on focus, rose border when `aria-invalid`, and an `h1` border and ring when an invalid field has focus). Use it on a bare control that labels itself:
@@ -803,6 +886,7 @@ Since 0.4.0. `cx(...classes: ClassValue[]): string` is the class merger every co
 - `FilterPanel`'s phone toggle carries `aria-expanded` and `aria-controls`. The result count is a live region. When "Clear filters" disappears after use, focus moves to the panel's heading instead of getting lost.
 - `CopyButton` announces "Copied." (or the failure) through an `<output>`, on every press.
 - `Pagination` moves focus to its "Page X of Y" text when the link you pressed goes away on the first or last page.
+- `Tabs` follows the ARIA tabs pattern: one tab in the Tab order, arrows, Home and End to move, `aria-controls` to its panel. `ReportDisclosure` says the outcome in a `role="status"` line and keeps a failed reason in the field.
 - `SiteHeader` marks the current page with `aria-current`. `PageShell` starts with a skip link to `<main>`.
 - `DiscordIcon` and `GitHubIcon` are hidden from screen readers by default: give the link around each one an `aria-label`, as `SiteFooter` does.
 - You supply the text, so you also supply labels: give icon-only buttons an `aria-label`, and keep `label` props meaningful.

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/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/forms/CharCounter.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file src/components/forms/CharCounter.tsx
+ * @desc How much of a length limit a text uses ("1,234 / 60,000 characters"), turning rose and
+ *       saying how many to cut once it's over. The caller counts (a BBCode counter, a string's
+ *       length), so it fits any rule. Server-safe. Moved from bb.haruhime.moe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ComponentProps } from "react";
+/** Every native `<p>` prop except children, plus the count, the limit and the unit. */
+export type CharCounterProps = Omit<ComponentProps<"p">, "children"> & {
+    /** How many are used. */
+    count: number;
+    /** The most allowed. */
+    limit: number;
+    /** What is counted (default "characters"). */
+    unit?: string | undefined;
+};
+/**
+ * @function CharCounter
+ * @param props {CharCounterProps} the count, the limit, the unit, and native `<p>` props
+ * @returns {JSX.Element} "count / limit unit" in c3, or in bold rose with ": N over the limit"
+ */
+export declare function CharCounter({ count, limit, unit, className, ...props }: CharCounterProps): import("react").JSX.Element;

package/dist/components/forms/CharCounter.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+const format = (value) => value.toLocaleString("en-US");
+/**
+ * @function CharCounter
+ * @param props {CharCounterProps} the count, the limit, the unit, and native `<p>` props
+ * @returns {JSX.Element} "count / limit unit" in c3, or in bold rose with ": N over the limit"
+ */
+export function CharCounter({ count, limit, unit = "characters", className, ...props }) {
+    const over = count - limit;
+    return (_jsxs("p", { className: cx("text-sm tabular-nums", over > 0 ? "font-bold text-rose-300" : "text-c3", className), ...props, children: [`${format(count)} / ${format(limit)} ${unit}`, over > 0 ? `: ${format(over)} over the limit` : ""] }));
+}

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/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/meta/JsonLd.d.ts

@@ -1,7 +1,8 @@
 /**
  * @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.
+ * @desc schema.org structured data as a JSON-LD script tag. "<", ">", "&" and the line and
+ *       paragraph separators (U+2028, U+2029) are written as JSON escapes, so no string in the
+ *       data (a user-supplied name, say) can close the tag, open a comment or break the script.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
  * @modified Mon Sep 28, 2026

package/dist/components/meta/JsonLd.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Characters written as JSON unicode escapes inside the script tag. */
+const UNSAFE = /[<>&\u2028\u2029]/g;
 /**
  * @function jsonLdString
  * @param data {Record<string, unknown>} a schema.org object
- * @returns {string} JSON with `@context` added and every "<" written as the escape `\u003c`
+ * @returns {string} JSON with `@context` added and "<", ">", "&", U+2028 and U+2029 written as
+ *          `\uXXXX` escapes (still the same JSON once parsed)
  */
-const jsonLdString = (data) => JSON.stringify({ "@context": "https://schema.org", ...data }).replace(/</g, "\\u003c");
+const jsonLdString = (data) => JSON.stringify({ "@context": "https://schema.org", ...data }).replace(UNSAFE, (char) => `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}`);
 /**
  * @function JsonLd
  * @param props {JsonLdProps} the schema.org data, plus native script props
@@ -12,6 +15,6 @@ const jsonLdString = (data) => JSON.stringify({ "@context": "https://schema.org"
  */
 export function JsonLd({ data, ...props }) {
     return (_jsx("script", { ...props, type: "application/ld+json", 
-        // biome-ignore lint/security/noDangerouslySetInnerHtml: JSON-LD must be raw JSON; jsonLdString escapes "<".
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: JSON-LD must be raw JSON; jsonLdString escapes the unsafe characters.
         dangerouslySetInnerHTML: { __html: jsonLdString(data) } }));
 }

package/dist/index.d.ts

@@ -22,21 +22,26 @@ export { type LinkClassOptions, linkClasses, type TextLinkVariant, } from "./com
 export { Notice, type NoticeProps, type NoticeTone } from "./components/basics/Notice.js";
 export { PageHeader, type PageHeaderProps } from "./components/basics/PageHeader.js";
 export { Prose, type ProseProps } from "./components/basics/Prose.js";
+export { type TabItem, Tabs, type TabsProps } from "./components/basics/Tabs.js";
 export { TextLink, type TextLinkProps } from "./components/basics/TextLink.js";
+export { tabId, tabPanelId } from "./components/basics/tabIds.js";
 export { Chip, type ChipProps } from "./components/filters/Chip.js";
 export { ChipGroup, type ChipGroupProps, type ChipOption } from "./components/filters/ChipGroup.js";
 export { type ChoiceChipOption, ChoiceChips, type ChoiceChipsProps, } from "./components/filters/ChoiceChips.js";
 export { FilterPanel, type FilterPanelProps } from "./components/filters/FilterPanel.js";
 export { FilterRow, type FilterRowProps } from "./components/filters/FilterRow.js";
 export { RangeSlider, type RangeSliderProps, type RangeSliderValue, } from "./components/filters/RangeSlider.js";
+export { CharCounter, type CharCounterProps } from "./components/forms/CharCounter.js";
 export { Checkbox, type CheckboxProps } from "./components/forms/Checkbox.js";
 export type { FieldProps } from "./components/forms/FieldFrame.js";
 export { fieldClasses } from "./components/forms/fieldStyles.js";
 export { RadioGroup, type RadioGroupProps, type RadioOption, } from "./components/forms/RadioGroup.js";
+export { ReportDisclosure, type ReportDisclosureProps, type ReportResult, } from "./components/forms/ReportDisclosure.js";
 export { Select, type SelectProps } from "./components/forms/Select.js";
 export { Textarea, type TextareaProps } from "./components/forms/Textarea.js";
 export { TextInput, type TextInputProps } from "./components/forms/TextInput.js";
 export { TypeToConfirm, type TypeToConfirmProps } from "./components/forms/TypeToConfirm.js";
+export { VISIBILITIES, VISIBILITY_TEXT, type Visibility, VisibilitySelect, type VisibilitySelectProps, type VisibilityText, } from "./components/forms/VisibilitySelect.js";
 export { DiscordIcon, type DiscordIconProps } from "./components/icons/DiscordIcon.js";
 export { GitHubIcon, type GitHubIconProps } from "./components/icons/GitHubIcon.js";
 export { HaruhimeWordmark, type HaruhimeWordmarkProps, } from "./components/icons/HaruhimeWordmark.js";

package/dist/index.js

@@ -23,7 +23,9 @@ export { linkClasses, } from "./components/basics/linkStyles.js";
 export { Notice } from "./components/basics/Notice.js";
 export { PageHeader } from "./components/basics/PageHeader.js";
 export { Prose } from "./components/basics/Prose.js";
+export { Tabs } from "./components/basics/Tabs.js";
 export { TextLink } from "./components/basics/TextLink.js";
+export { tabId, tabPanelId } from "./components/basics/tabIds.js";
 // Filters
 export { Chip } from "./components/filters/Chip.js";
 export { ChipGroup } from "./components/filters/ChipGroup.js";
@@ -32,13 +34,16 @@ export { FilterPanel } from "./components/filters/FilterPanel.js";
 export { FilterRow } from "./components/filters/FilterRow.js";
 export { RangeSlider, } from "./components/filters/RangeSlider.js";
 // Forms
+export { CharCounter } from "./components/forms/CharCounter.js";
 export { Checkbox } from "./components/forms/Checkbox.js";
 export { fieldClasses } from "./components/forms/fieldStyles.js";
 export { RadioGroup, } from "./components/forms/RadioGroup.js";
+export { ReportDisclosure, } from "./components/forms/ReportDisclosure.js";
 export { Select } from "./components/forms/Select.js";
 export { Textarea } from "./components/forms/Textarea.js";
 export { TextInput } from "./components/forms/TextInput.js";
 export { TypeToConfirm } from "./components/forms/TypeToConfirm.js";
+export { VISIBILITIES, VISIBILITY_TEXT, VisibilitySelect, } from "./components/forms/VisibilitySelect.js";
 // Icons
 export { DiscordIcon } from "./components/icons/DiscordIcon.js";
 export { GitHubIcon } from "./components/icons/GitHubIcon.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haruhimemoe/ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "React components for the haruhime.moe osu! tools on Next.js: the osu!-web-style palette as a Tailwind theme, buttons, cards, form fields and confirms, filter controls, tables, osu! beatmap display pieces and the site header and footer.",
   "keywords": [
     "osu",