@haruhimemoe/next-kit 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -6,6 +6,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-09-28
+
+### Added
+
+- `@haruhimemoe/next-kit/auth-react`: the account components, styled with `@haruhimemoe/ui` (a new optional peer, ^0.5.0). `SignInWithOsu`, `SignOutButton`, `AccountMenu` (ui's HeaderMenu with the app's links) and `DeleteAccountForm` (type the username, then one DELETE), with `createAuthComponents(authClient, kit)` to bind the app's client and account kit. Moved from packs, pools and bb, which each had a copy.
+- `osuAvatarSrc` and `OSU_AVATAR_HOSTS`: an osu! avatar URL only from a.ppy.sh or osu.ppy.sh. Moved from pools and bb.
+- `signInErrorMessage`: reads better-auth's flat or nested error message, as packs did.
+
+### Changed
+
+- `auth-react` now also loads `@haruhimemoe/ui` at runtime.
+
 ## [0.1.0] - 2026-09-28
 
 ### Added
@@ -17,5 +29,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - `@haruhimemoe/next-kit/auth-react`: `createSignedInMarker`, `createAccountStore`, `useAccount`, `createAccount`, `RestoreSignedIn` and `osuSignIn`.
 - `@haruhimemoe/next-kit/testing`: `startMemoryMongo`, `setupTestDb`, `setupMsw` and the fake osu! app env.
 
-[unreleased]: https://github.com/haruhimemoe/next-kit/compare/v0.1.0...HEAD
+[unreleased]: https://github.com/haruhimemoe/next-kit/compare/v0.2.0...HEAD
+[0.2.0]: https://github.com/haruhimemoe/next-kit/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/haruhimemoe/next-kit/releases/tag/v0.1.0

package/README.md

@@ -8,7 +8,7 @@ The Next.js server plumbing the haruhime.moe tools share. [packs.haruhime.moe](h
 - **`/env`:** zod env parsing that runs on first use, with SKIP_ENV_VALIDATION for CI and a guard that refuses placeholder secrets on a production server.
 - **`/mongo`:** one MongoClient per process with Mongoose on the same client, index builds that never take the site down, and frozen collection names.
 - **`/auth`:** better-auth with osu! as the only way in, the indexes its collections need, and reading the caller.
-- **`/auth-react`:** the browser half: the signed-in marker cookie, the account store and `useAccount`, and `RestoreSignedIn`.
+- **`/auth-react`:** the browser half: the signed-in marker cookie, the account store and `useAccount`, `RestoreSignedIn`, and the account components (Sign in with osu!, Sign out, the header's account menu, Delete my account) styled with `@haruhimemoe/ui`.
 - **`/testing`:** Vitest helpers: one in-memory MongoDB per run, an msw server that refuses unhandled requests, and a fake env.
 
 Every name, path, limit and message comes from the caller. There is no root entry point; import a subpath.
@@ -28,7 +28,7 @@ bun add @haruhimemoe/next-kit zod
 | `env` | nothing else |
 | `mongo` | `mongodb` ^7.6.0, `mongoose` ^9.10.2 |
 | `auth` | `better-auth` ^1.7.5, `mongodb`, `@haruhimemoe/osu` 0.2 or 0.3 |
-| `auth-react` | `react` ^19.3.0, `next` ^16.3.6 |
+| `auth-react` | `react` ^19.3.0, `next` ^16.3.6, `@haruhimemoe/ui` ^0.5.0 (with its theme set up) |
 | `testing` | `vitest` ^5.0.1, `msw` ^2.15.0, `mongodb-memory-server` ^11.3.0 |
 
 ## Use
@@ -103,7 +103,15 @@ export const getAuth = () => {
 import { createAccount, createSignedInMarker } from "@haruhimemoe/next-kit/auth-react";
 
 export const marker = createSignedInMarker("pools-signed-in");
-export const { store, useAccount, markSignedOut, RestoreSignedIn } = createAccount(authClient, marker);
+const kit = createAccount(authClient, marker);
+export const { store, useAccount, markSignedOut, RestoreSignedIn } = kit;
+export const { SignInWithOsu, SignOutButton, AccountMenu, DeleteAccountForm } =
+  createAuthComponents(authClient, kit);
+
+// Anywhere, server pages included: only plain data is left to pass.
+<SignInWithOsu next={next} />
+<AccountMenu items={[{ href: "/new", label: "Make a pool" }, { href: "/account", label: "Account" }]} />
+<DeleteAccountForm username={user.username} appName="pools" deletes="This deletes your account and every pool you own. It can't be undone." />
 ```
 
 Build the auth instance once (memoize `getAuth`), and use the same cookie name on both sides.
@@ -169,6 +177,12 @@ Build the auth instance once (memoize `getAuth`), and use the same cookie name o
 | `RestoreSignedIn({ store, hasMarker, next?, pending? })` | Asks for the session once when the marker is missing; with `next`, goes there after. |
 | `osuSignIn(next, signInPath?)` | The body for `authClient.signIn.social`: an error comes back to `/signin?next=<next>`. |
 | `safeNextPath`, `signInHref`, `OSU_PROVIDER_ID` | The same as in `server` and `auth`, safe in the browser. |
+| `createAuthComponents(authClient, kit)` | Since 0.2.0. The four components below with the client's `signIn.social` and `signOut` and the kit's `useAccount` and `markSignedOut` bound (`AuthComponents`; props `BoundSignInProps`, `BoundSignOutProps`, `BoundAccountMenuProps`, `BoundDeleteAccountProps`: each component's own minus what's bound). Export them from a `"use client"` module. |
+| `SignInWithOsu({ next, signIn, signInPath?, label?, pendingLabel?, failedMessage? })` | Since 0.2.0. The large "Sign in with osu!" button. Calls `signIn(osuSignIn(next))`; an error (better-auth's `{ message }` or `{ error: { message } }`, or a throw) shows in a `role="alert"` line and the button comes back. `signInErrorMessage(error, fallback?)` reads it. |
+| `SignOutButton({ signOut, onSignedOut, redirectTo?, variant?, className?, label?, pendingLabel? })` | Since 0.2.0. Signs out, runs `onSignedOut` only once the session is gone, then `router.replace(redirectTo ?? "/")` and `router.refresh()`. |
+| `AccountMenu({ account, items, signOut, onSignedOut, avatarSrc?, signInPath?, signInLabel?, signOutLabel?, signOutRedirect? })` | Since 0.2.0. A sized blank while loading, a "Sign in" link back to this page when signed out, else ui's `HeaderMenu` with the avatar and name, `items` and Sign out. The avatar is a plain `<img>` (your CSP's img-src must allow a.ppy.sh and osu.ppy.sh); `avatarSrc` defaults to `osuAvatarSrc`. |
+| `DeleteAccountForm({ username, appName, deletes, onDeleted, endpoint?, homeHref?, homeLabel?, fetcher? })` | Since 0.2.0. ui's `TypeToConfirm` on the username, then `DELETE endpoint` (default `/api/account`) with `{ username }`. 204: `onDeleted`, "Your account is deleted." and home. Another 2xx: `onDeleted` and the answer's `notice` after that line, staying. A refusal shows `error.message` (else "Deleting failed (status)."); no answer, "Couldn't reach <appName>. Your account is still there." `deletes` is inline content in a `<p>`. |
+| `osuAvatarSrc(url)`, `OSU_AVATAR_HOSTS` | Since 0.2.0. An osu! avatar URL on https when it's on a.ppy.sh or osu.ppy.sh (a bare path is osu.ppy.sh's), else null. |
 
 ### testing
 
@@ -197,7 +211,7 @@ For pools.haruhime.moe, `createMongo` runs `onConnect` (the privilege check, ind
 
 ## Compatibility
 
-ES modules for Node 22.12+ on the server. `auth-react` also runs in browsers; its hook and component files keep `"use client"`, and it loads only `react` and `next/navigation.js`. `server` loads `node:crypto` for machine auth.
+ES modules for Node 22.12+ on the server. `auth-react` also runs in browsers; its hook and component files keep `"use client"`, and it loads only `react`, `next/navigation.js` and `@haruhimemoe/ui`. `server` loads `node:crypto` for machine auth.
 
 ## License
 

package/dist/auth-react/AccountMenu.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @file src/auth-react/AccountMenu.tsx
+ * @desc The header's account area. Client-side, so static pages stay static and read no cookies:
+ *       the account comes from the app's useAccount, which asks only when the signed-in marker is
+ *       there. Nothing to press while loading; "Sign in" (back to this page) when signed out;
+ *       signed in, ui's HeaderMenu: the avatar (a plain img, so the app's CSP img-src must allow
+ *       osu!'s avatar hosts) and name, the app's links, and Sign out. Escape,
+ *       a click outside or on a link, or focus leaving it closes it. Moved from pools and bb
+ *       (src/components/layout/AccountMenu.tsx), which differed only in the links.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type HeaderMenuItem } from "@haruhimemoe/ui";
+import type { ReactNode } from "react";
+import type { Account } from "./account-store.js";
+/** AccountMenu's props. */
+export type AccountMenuProps = {
+    /** The account (the app's useAccount()); createAuthComponents binds it. */
+    account: Account;
+    /** The menu's links, top to bottom; Sign out comes after them. */
+    items: readonly HeaderMenuItem[];
+    /** Ends the session; createAuthComponents binds it. */
+    signOut: () => Promise<unknown>;
+    /** Runs once the session is gone (markSignedOut); createAuthComponents binds it. */
+    onSignedOut: () => void;
+    /** Where the avatar is shown from, or null for none (default osuAvatarSrc). */
+    avatarSrc?: ((url: string | null) => string | null) | undefined;
+    /** The sign-in page (default /signin). */
+    signInPath?: string | undefined;
+    /** The sign-in link's text (default "Sign in"). */
+    signInLabel?: ReactNode;
+    /** The sign-out button's text (default "Sign out"). */
+    signOutLabel?: ReactNode;
+    /** Where sign-out goes (default "/"). */
+    signOutRedirect?: string | undefined;
+};
+/**
+ * @function AccountMenu
+ * @param props {AccountMenuProps} the account, the links, the sign-out wiring and the words
+ * @returns {ReactNode} a sized blank while loading, the sign-in link when signed out, else the
+ *          avatar menu with the links and Sign out
+ */
+export declare function AccountMenu({ account, items, signOut, onSignedOut, avatarSrc, signInPath, signInLabel, signOutLabel, signOutRedirect, }: AccountMenuProps): ReactNode;

package/dist/auth-react/AccountMenu.js

@@ -0,0 +1,36 @@
+/**
+ * @file src/auth-react/AccountMenu.tsx
+ * @desc The header's account area. Client-side, so static pages stay static and read no cookies:
+ *       the account comes from the app's useAccount, which asks only when the signed-in marker is
+ *       there. Nothing to press while loading; "Sign in" (back to this page) when signed out;
+ *       signed in, ui's HeaderMenu: the avatar (a plain img, so the app's CSP img-src must allow
+ *       osu!'s avatar hosts) and name, the app's links, and Sign out. Escape,
+ *       a click outside or on a link, or focus leaving it closes it. Moved from pools and bb
+ *       (src/components/layout/AccountMenu.tsx), which differed only in the links.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeaderMenu } from "@haruhimemoe/ui";
+import { usePathname } from "next/navigation.js";
+import { DEFAULT_SIGN_IN_PATH, signInHref } from "../server/safe-next.js";
+import { osuAvatarSrc } from "./avatar.js";
+import { SignOutButton } from "./SignOutButton.js";
+/**
+ * @function AccountMenu
+ * @param props {AccountMenuProps} the account, the links, the sign-out wiring and the words
+ * @returns {ReactNode} a sized blank while loading, the sign-in link when signed out, else the
+ *          avatar menu with the links and Sign out
+ */
+export function AccountMenu({ account, items, signOut, onSignedOut, avatarSrc = osuAvatarSrc, signInPath = DEFAULT_SIGN_IN_PATH, signInLabel = "Sign in", signOutLabel, signOutRedirect, }) {
+    const pathname = usePathname();
+    if (account.status === "loading")
+        return _jsx("span", { "aria-hidden": "true", className: "block h-7 w-16" });
+    if (account.status === "signed-out") {
+        return (_jsx("a", { href: signInHref(pathname || "/", signInPath), className: "font-bold text-c3 text-sm transition-colors hover:text-c1", children: signInLabel }));
+    }
+    const avatar = avatarSrc(account.user.avatarUrl);
+    return (_jsx(HeaderMenu, { label: _jsxs(_Fragment, { children: [avatar ? (_jsx("img", { src: avatar, alt: "", width: 28, height: 28, className: "rounded-full" })) : null, _jsx("span", { children: account.user.username })] }), items: items, children: _jsx(SignOutButton, { signOut: signOut, onSignedOut: onSignedOut, redirectTo: signOutRedirect, label: signOutLabel, variant: "ghost", className: "h-auto justify-start rounded px-3 py-2" }) }));
+}

package/dist/auth-react/DeleteAccountForm.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @file src/auth-react/DeleteAccountForm.tsx
+ * @desc "Delete my account". The confirmation is built into the page (ui's TypeToConfirm, no
+ *       confirm() dialog): the button stays off until the osu! username is typed exactly, then
+ *       one DELETE to the app's endpoint carries it. 204 means gone: signed out, the page says
+ *       so and goes home. Another 2xx is gone too but stays, to show the answer's `notice` (work
+ *       still waiting elsewhere). A refusal says the server's message, and no answer says the app
+ *       couldn't be reached; nothing was deleted. The form never comes back once it's gone.
+ *       Moved from pools and bb (src/components/account/DeleteAccountForm.tsx).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ReactNode } from "react";
+/** DeleteAccountForm's props. */
+export type DeleteAccountFormProps = {
+    /** The signed-in osu! username, typed to confirm and sent as `{ username }`. */
+    username: string;
+    /** The app's name, for "Couldn't reach <appName>. Your account is still there." */
+    appName: string;
+    /** What goes, above the field ("This deletes your account and every pool you own…"). */
+    deletes: ReactNode;
+    /** Runs once the account is gone (markSignedOut); createAuthComponents binds it. */
+    onDeleted: () => void;
+    /** The DELETE endpoint (default "/api/account"). */
+    endpoint?: string | undefined;
+    /** Where to go after (default "/"). */
+    homeHref?: string | undefined;
+    /** The link home's text once deleted (default "Go to the home page"). */
+    homeLabel?: ReactNode;
+    /** Test seam (default: fetch). */
+    fetcher?: typeof fetch | undefined;
+};
+/**
+ * @function DeleteAccountForm
+ * @param props {DeleteAccountFormProps} the username, the app's name, what goes, the endpoint
+ *        and what to do after
+ * @returns {ReactNode} the typed-name confirmation, or what happened
+ */
+export declare function DeleteAccountForm({ username, appName, deletes, onDeleted, endpoint, homeHref, homeLabel, fetcher, }: DeleteAccountFormProps): ReactNode;

package/dist/auth-react/DeleteAccountForm.js

@@ -0,0 +1,70 @@
+/**
+ * @file src/auth-react/DeleteAccountForm.tsx
+ * @desc "Delete my account". The confirmation is built into the page (ui's TypeToConfirm, no
+ *       confirm() dialog): the button stays off until the osu! username is typed exactly, then
+ *       one DELETE to the app's endpoint carries it. 204 means gone: signed out, the page says
+ *       so and goes home. Another 2xx is gone too but stays, to show the answer's `notice` (work
+ *       still waiting elsewhere). A refusal says the server's message, and no answer says the app
+ *       couldn't be reached; nothing was deleted. The form never comes back once it's gone.
+ *       Moved from pools and bb (src/components/account/DeleteAccountForm.tsx).
+ * @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 { buttonClasses, TypeToConfirm } from "@haruhimemoe/ui";
+import { useRouter } from "next/navigation.js";
+import { useId, useState } from "react";
+const messageOf = async (response) => {
+    const fallback = `Deleting failed (${response.status}).`;
+    try {
+        const body = (await response.json());
+        return body.error?.message ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+};
+/**
+ * @function DeleteAccountForm
+ * @param props {DeleteAccountFormProps} the username, the app's name, what goes, the endpoint
+ *        and what to do after
+ * @returns {ReactNode} the typed-name confirmation, or what happened
+ */
+export function DeleteAccountForm({ username, appName, deletes, onDeleted, endpoint = "/api/account", homeHref = "/", homeLabel = "Go to the home page", fetcher = fetch, }) {
+    const router = useRouter();
+    const id = useId();
+    const [error, setError] = useState(null);
+    // Once it's gone: what more to say. The form doesn't come back, so no second delete.
+    const [done, setDone] = useState(null);
+    const remove = async () => {
+        setError(null);
+        try {
+            const response = await fetcher(endpoint, {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ username }),
+            });
+            if (!response.ok) {
+                setError(await messageOf(response));
+                return;
+            }
+            onDeleted();
+            if (response.status === 204) {
+                setDone("");
+                router.push(homeHref);
+                return;
+            }
+            const body = (await response.json().catch(() => ({})));
+            setDone(typeof body.notice === "string" ? body.notice : "");
+        }
+        catch {
+            setError(`Couldn't reach ${appName}. Your account is still there.`);
+        }
+    };
+    if (done !== null) {
+        return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { role: "status", className: "text-c2 text-sm", children: `Your account is deleted. ${done}`.trim() }), _jsx("a", { href: homeHref, className: buttonClasses({ variant: "secondary", className: "self-start" }), children: homeLabel })] }));
+    }
+    return (_jsx(TypeToConfirm, { id: id, expected: username, submitLabel: "Delete my account", pendingLabel: "Deleting\u2026", error: error, onConfirm: remove, children: _jsx("p", { className: "text-c2 text-sm", children: deletes }) }));
+}

package/dist/auth-react/SignInWithOsu.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @file src/auth-react/SignInWithOsu.tsx
+ * @desc "Sign in with osu!": starts the OAuth redirect through the app's better-auth client, then
+ *       lands on `next`, or back on /signin?next=<next>&error=<code> when osu! says no. A call
+ *       that can't start says so under the button (role="alert") and lets the visitor try again.
+ *       Styled with @haruhimemoe/ui. Moved from packs and pools
+ *       (src/components/auth/SignInWithOsu.tsx), where only the error reading differed.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ReactNode } from "react";
+import { type OsuSignIn } from "./sign-in.js";
+/** The better-auth call that starts sign-in (`(body) => authClient.signIn.social(body)`). */
+export type StartSignIn = (body: OsuSignIn) => Promise<unknown>;
+/** SignInWithOsu's props. */
+export type SignInWithOsuProps = {
+    /** Where to land after signing in (already checked with safeNextPath). */
+    next: string;
+    /** Starts sign-in; createAuthComponents binds the app's client. */
+    signIn: StartSignIn;
+    /** The sign-in page errors come back to (default /signin). */
+    signInPath?: string | undefined;
+    /** The button's text (default "Sign in with osu!"). */
+    label?: ReactNode;
+    /** The button's text while osu! opens (default "Opening osu!…"). */
+    pendingLabel?: ReactNode;
+    /** Said when sign-in can't start and the error has no message. */
+    failedMessage?: string | undefined;
+};
+/**
+ * @function signInErrorMessage
+ * @param error {unknown} better-auth's error (`{ message }`, or `{ error: { message } }`)
+ * @param fallback {string} said when it carries no message
+ * @returns {string} the message to show
+ */
+export declare const signInErrorMessage: (error: unknown, fallback?: string) => string;
+/**
+ * @function SignInWithOsu
+ * @param props {SignInWithOsuProps} `next`, the sign-in call, and the words
+ * @returns {ReactNode} the large "Sign in with osu!" button, with an alert when it can't start
+ */
+export declare function SignInWithOsu({ next, signIn, signInPath, label, pendingLabel, failedMessage, }: SignInWithOsuProps): ReactNode;

package/dist/auth-react/SignInWithOsu.js

@@ -0,0 +1,58 @@
+/**
+ * @file src/auth-react/SignInWithOsu.tsx
+ * @desc "Sign in with osu!": starts the OAuth redirect through the app's better-auth client, then
+ *       lands on `next`, or back on /signin?next=<next>&error=<code> when osu! says no. A call
+ *       that can't start says so under the button (role="alert") and lets the visitor try again.
+ *       Styled with @haruhimemoe/ui. Moved from packs and pools
+ *       (src/components/auth/SignInWithOsu.tsx), where only the error reading differed.
+ * @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 { Button } from "@haruhimemoe/ui";
+import { useState } from "react";
+import { osuSignIn } from "./sign-in.js";
+const FAILED = "Couldn't start osu! sign-in. Try again.";
+/**
+ * @function signInErrorMessage
+ * @param error {unknown} better-auth's error (`{ message }`, or `{ error: { message } }`)
+ * @param fallback {string} said when it carries no message
+ * @returns {string} the message to show
+ */
+export const signInErrorMessage = (error, fallback = FAILED) => {
+    if (typeof error !== "object" || error === null)
+        return fallback;
+    const { message, error: nested } = error;
+    if (typeof message === "string" && message)
+        return message;
+    if (typeof nested?.message === "string" && nested.message)
+        return nested.message;
+    return fallback;
+};
+/**
+ * @function SignInWithOsu
+ * @param props {SignInWithOsuProps} `next`, the sign-in call, and the words
+ * @returns {ReactNode} the large "Sign in with osu!" button, with an alert when it can't start
+ */
+export function SignInWithOsu({ next, signIn, signInPath, label = "Sign in with osu!", pendingLabel = "Opening osu!…", failedMessage = FAILED, }) {
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const onClick = async () => {
+        setPending(true);
+        setError(null);
+        try {
+            // better-auth adds &error=<code> to the error URL; /signin explains it and keeps `next`.
+            const result = (await signIn(osuSignIn(next, signInPath)));
+            if (!result?.error)
+                return;
+            setError(signInErrorMessage(result.error, failedMessage));
+        }
+        catch (cause) {
+            setError(signInErrorMessage(cause, failedMessage));
+        }
+        setPending(false);
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Button, { size: "lg", onClick: onClick, disabled: pending, children: pending ? pendingLabel : label }), error ? (_jsx("p", { role: "alert", className: "font-bold text-rose-300 text-sm", children: error })) : null] }));
+}

package/dist/auth-react/SignOutButton.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @file src/auth-react/SignOutButton.tsx
+ * @desc Signs out, forgets the signed-in marker once the session is really gone (so the header
+ *       flips without a reload), then goes home and refreshes server components. A failed
+ *       sign-out still goes home, marker kept. Styled with @haruhimemoe/ui. Moved from packs and
+ *       pools (src/components/auth/SignOutButton.tsx).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import { type ButtonVariant } from "@haruhimemoe/ui";
+import { type ReactNode } from "react";
+/** SignOutButton's props. */
+export type SignOutButtonProps = {
+    /** Ends the session (`() => authClient.signOut()`); createAuthComponents binds it. */
+    signOut: () => Promise<unknown>;
+    /** Runs once the session is gone (the account kit's markSignedOut). */
+    onSignedOut: () => void;
+    /** Where to go after (default "/"). */
+    redirectTo?: string | undefined;
+    /** The button's look (default "secondary"). */
+    variant?: ButtonVariant | undefined;
+    /** Classes for the button. */
+    className?: string | undefined;
+    /** The button's text (default "Sign out"). */
+    label?: ReactNode;
+    /** The button's text while signing out (default "Signing out…"). */
+    pendingLabel?: ReactNode;
+};
+/**
+ * @function SignOutButton
+ * @param props {SignOutButtonProps} the sign-out call, what to do after, where to go, the look
+ * @returns {ReactNode} a button that signs out, tells the header, and goes to `redirectTo`
+ */
+export declare function SignOutButton({ signOut, onSignedOut, redirectTo, variant, className, label, pendingLabel, }: SignOutButtonProps): ReactNode;

package/dist/auth-react/SignOutButton.js

@@ -0,0 +1,31 @@
+/**
+ * @file src/auth-react/SignOutButton.tsx
+ * @desc Signs out, forgets the signed-in marker once the session is really gone (so the header
+ *       flips without a reload), then goes home and refreshes server components. A failed
+ *       sign-out still goes home, marker kept. Styled with @haruhimemoe/ui. Moved from packs and
+ *       pools (src/components/auth/SignOutButton.tsx).
+ * @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 { Button } from "@haruhimemoe/ui";
+import { useRouter } from "next/navigation.js";
+import { useState } from "react";
+/**
+ * @function SignOutButton
+ * @param props {SignOutButtonProps} the sign-out call, what to do after, where to go, the look
+ * @returns {ReactNode} a button that signs out, tells the header, and goes to `redirectTo`
+ */
+export function SignOutButton({ signOut, onSignedOut, redirectTo = "/", variant = "secondary", className, label = "Sign out", pendingLabel = "Signing out…", }) {
+    const router = useRouter();
+    const [pending, setPending] = useState(false);
+    const onClick = async () => {
+        setPending(true);
+        await signOut().then(onSignedOut, () => undefined);
+        router.replace(redirectTo);
+        router.refresh();
+    };
+    return (_jsx(Button, { variant: variant, className: className, onClick: onClick, disabled: pending, children: pending ? pendingLabel : label }));
+}

package/dist/auth-react/auth-components.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @file src/auth-react/auth-components.tsx
+ * @desc createAuthComponents: SignInWithOsu, SignOutButton, AccountMenu and DeleteAccountForm
+ *       with the app's better-auth client and account kit already bound, so what's left is plain
+ *       data a server page can pass. Export them from the app's own "use client" module, next to
+ *       createAccount's.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { ReactNode } from "react";
+import { type AccountMenuProps } from "./AccountMenu.js";
+import type { Account } from "./account-store.js";
+import { type DeleteAccountFormProps } from "./DeleteAccountForm.js";
+import { type SignInWithOsuProps, type StartSignIn } from "./SignInWithOsu.js";
+import { type SignOutButtonProps } from "./SignOutButton.js";
+/** The part of a better-auth client the components call. */
+export type AuthUiClient = {
+    signIn: {
+        social: StartSignIn;
+    };
+    signOut: () => Promise<unknown>;
+};
+/** The part of createAccount's kit the components use. */
+export type AuthUiAccount = {
+    useAccount: () => Account;
+    markSignedOut: () => void;
+};
+/** The bound components' props: each component's own, minus what's bound. */
+export type BoundSignInProps = Omit<SignInWithOsuProps, "signIn">;
+/** SignOutButton's props minus the bound sign-out. */
+export type BoundSignOutProps = Omit<SignOutButtonProps, "signOut" | "onSignedOut">;
+/** AccountMenu's props minus the bound account and sign-out. */
+export type BoundAccountMenuProps = Omit<AccountMenuProps, "account" | "signOut" | "onSignedOut">;
+/** DeleteAccountForm's props minus the bound onDeleted. */
+export type BoundDeleteAccountProps = Omit<DeleteAccountFormProps, "onDeleted">;
+/** What createAuthComponents returns. */
+export type AuthComponents = {
+    SignInWithOsu: (props: BoundSignInProps) => ReactNode;
+    SignOutButton: (props: BoundSignOutProps) => ReactNode;
+    AccountMenu: (props: BoundAccountMenuProps) => ReactNode;
+    DeleteAccountForm: (props: BoundDeleteAccountProps) => ReactNode;
+};
+/**
+ * @function createAuthComponents
+ * @param client {AuthUiClient} the app's better-auth client (signIn.social and signOut)
+ * @param account {AuthUiAccount} createAccount's kit (useAccount and markSignedOut)
+ * @returns {AuthComponents} the four components with the client and account bound
+ */
+export declare const createAuthComponents: (client: AuthUiClient, account: AuthUiAccount) => AuthComponents;

package/dist/auth-react/auth-components.js

@@ -0,0 +1,36 @@
+/**
+ * @file src/auth-react/auth-components.tsx
+ * @desc createAuthComponents: SignInWithOsu, SignOutButton, AccountMenu and DeleteAccountForm
+ *       with the app's better-auth client and account kit already bound, so what's left is plain
+ *       data a server page can pass. Export them from the app's own "use client" module, next to
+ *       createAccount's.
+ * @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 { AccountMenu } from "./AccountMenu.js";
+import { DeleteAccountForm } from "./DeleteAccountForm.js";
+import { SignInWithOsu } from "./SignInWithOsu.js";
+import { SignOutButton } from "./SignOutButton.js";
+/**
+ * @function createAuthComponents
+ * @param client {AuthUiClient} the app's better-auth client (signIn.social and signOut)
+ * @param account {AuthUiAccount} createAccount's kit (useAccount and markSignedOut)
+ * @returns {AuthComponents} the four components with the client and account bound
+ */
+export const createAuthComponents = (client, account) => {
+    const signIn = (body) => client.signIn.social(body);
+    const signOut = () => client.signOut();
+    const onSignedOut = () => account.markSignedOut();
+    return {
+        SignInWithOsu: (props) => _jsx(SignInWithOsu, { ...props, signIn: signIn }),
+        SignOutButton: (props) => (_jsx(SignOutButton, { ...props, signOut: signOut, onSignedOut: onSignedOut })),
+        AccountMenu: function BoundAccountMenu(props) {
+            const current = account.useAccount();
+            return (_jsx(AccountMenu, { ...props, account: current, signOut: signOut, onSignedOut: onSignedOut }));
+        },
+        DeleteAccountForm: (props) => _jsx(DeleteAccountForm, { ...props, onDeleted: onSignedOut }),
+    };
+};

package/dist/auth-react/avatar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file src/auth-react/avatar.ts
+ * @desc Where an osu! avatar is shown from. osu!'s API sends a.ppy.sh URLs, and the guest avatar
+ *       on osu.ppy.sh (which osu-web can send as a bare path). An app's CSP and next/image
+ *       config allow those two hosts, so any other URL shows no avatar rather than a broken one.
+ *       Pure and browser-safe. Moved from pools and bb (src/utils/avatar.ts, identical).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** osu!'s avatar hosts. */
+export declare const OSU_AVATAR_HOSTS: ReadonlySet<string>;
+/**
+ * @function osuAvatarSrc
+ * @param url {string | null | undefined} the avatar URL osu! sent
+ * @returns {string | null} it on https when it's on a.ppy.sh or osu.ppy.sh (a bare path read as
+ *          osu.ppy.sh's), else null
+ */
+export declare const osuAvatarSrc: (url: string | null | undefined) => string | null;

package/dist/auth-react/avatar.js

@@ -0,0 +1,37 @@
+/**
+ * @file src/auth-react/avatar.ts
+ * @desc Where an osu! avatar is shown from. osu!'s API sends a.ppy.sh URLs, and the guest avatar
+ *       on osu.ppy.sh (which osu-web can send as a bare path). An app's CSP and next/image
+ *       config allow those two hosts, so any other URL shows no avatar rather than a broken one.
+ *       Pure and browser-safe. Moved from pools and bb (src/utils/avatar.ts, identical).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** osu!'s avatar hosts. */
+export const OSU_AVATAR_HOSTS = new Set(["a.ppy.sh", "osu.ppy.sh"]);
+/** A bare path is osu-web's own. */
+const OSU_WEB = "https://osu.ppy.sh";
+/**
+ * @function osuAvatarSrc
+ * @param url {string | null | undefined} the avatar URL osu! sent
+ * @returns {string | null} it on https when it's on a.ppy.sh or osu.ppy.sh (a bare path read as
+ *          osu.ppy.sh's), else null
+ */
+export const osuAvatarSrc = (url) => {
+    if (!url)
+        return null;
+    let parsed;
+    try {
+        parsed = new URL(url, OSU_WEB);
+    }
+    catch {
+        return null;
+    }
+    if (parsed.protocol !== "https:" && parsed.protocol !== "http:")
+        return null;
+    if (!OSU_AVATAR_HOSTS.has(parsed.hostname) || parsed.port !== "")
+        return null;
+    parsed.protocol = "https:";
+    return parsed.href;
+};

package/dist/auth-react/index.d.ts

@@ -2,7 +2,8 @@
  * @file src/auth-react/index.ts
  * @desc @haruhimemoe/next-kit/auth-react: the browser side of osu! sign-in. The signed-in marker
  *       cookie, the account store and useAccount, RestoreSignedIn, what the sign-in button
- *       sends, and where to go after sign-in. No "use client" here: the hook and component
+ *       sends, where to go after sign-in, and the account components (sign in, sign out, the
+ *       header's account menu, delete my account), styled with @haruhimemoe/ui. No "use client" here: the hook and component
  *       files carry it, so a server page can still call safeNextPath from this entry point.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
@@ -10,8 +11,14 @@
  */
 export { OSU_PROVIDER_ID } from "../auth/osu-id.js";
 export { DEFAULT_SIGN_IN_PATH, type SafeNextOptions, safeNextPath, signInHref, } from "../server/safe-next.js";
+export { AccountMenu, type AccountMenuProps, } from "./AccountMenu.js";
 export { type Account, type AccountDeps, type AccountStore, createAccountStore, LOADING, type SessionData, } from "./account-store.js";
+export { type AuthComponents, type AuthUiAccount, type AuthUiClient, type BoundAccountMenuProps, type BoundDeleteAccountProps, type BoundSignInProps, type BoundSignOutProps, createAuthComponents, } from "./auth-components.js";
+export { OSU_AVATAR_HOSTS, osuAvatarSrc } from "./avatar.js";
+export { DeleteAccountForm, type DeleteAccountFormProps } from "./DeleteAccountForm.js";
 export { createSignedInMarker, markerMaxAge, type SignedInMarker } from "./marker.js";
 export { RestoreSignedIn, type RestoreSignedInProps } from "./RestoreSignedIn.js";
+export { SignInWithOsu, type SignInWithOsuProps, type StartSignIn, signInErrorMessage, } from "./SignInWithOsu.js";
+export { SignOutButton, type SignOutButtonProps } from "./SignOutButton.js";
 export { type OsuSignIn, osuSignIn } from "./sign-in.js";
 export { type AccountKit, type BoundRestoreProps, createAccount, type SessionClient, sessionFetcher, useAccount, } from "./use-account.js";

package/dist/auth-react/index.js

@@ -2,7 +2,8 @@
  * @file src/auth-react/index.ts
  * @desc @haruhimemoe/next-kit/auth-react: the browser side of osu! sign-in. The signed-in marker
  *       cookie, the account store and useAccount, RestoreSignedIn, what the sign-in button
- *       sends, and where to go after sign-in. No "use client" here: the hook and component
+ *       sends, where to go after sign-in, and the account components (sign in, sign out, the
+ *       header's account menu, delete my account), styled with @haruhimemoe/ui. No "use client" here: the hook and component
  *       files carry it, so a server page can still call safeNextPath from this entry point.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
@@ -10,8 +11,14 @@
  */
 export { OSU_PROVIDER_ID } from "../auth/osu-id.js";
 export { DEFAULT_SIGN_IN_PATH, safeNextPath, signInHref, } from "../server/safe-next.js";
+export { AccountMenu, } from "./AccountMenu.js";
 export { createAccountStore, LOADING, } from "./account-store.js";
+export { createAuthComponents, } from "./auth-components.js";
+export { OSU_AVATAR_HOSTS, osuAvatarSrc } from "./avatar.js";
+export { DeleteAccountForm } from "./DeleteAccountForm.js";
 export { createSignedInMarker, markerMaxAge } from "./marker.js";
 export { RestoreSignedIn } from "./RestoreSignedIn.js";
+export { SignInWithOsu, signInErrorMessage, } from "./SignInWithOsu.js";
+export { SignOutButton } from "./SignOutButton.js";
 export { osuSignIn } from "./sign-in.js";
 export { createAccount, sessionFetcher, useAccount, } from "./use-account.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haruhimemoe/next-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The Next.js server plumbing packs.haruhime.moe and pools.haruhime.moe share: JSON route helpers, rate limits and budgets in MongoDB, bearer machine auth, zod env parsing, a connect-once MongoDB client with safe index builds, better-auth with osu! sign-in, and the signed-in marker and account store for the browser.",
   "keywords": [
     "nextjs",
@@ -76,6 +76,7 @@
   },
   "peerDependencies": {
     "@haruhimemoe/osu": "^0.2.0 || ^0.3.0",
+    "@haruhimemoe/ui": "^0.5.0",
     "better-auth": "^1.7.5",
     "mongodb": "^7.6.0",
     "mongodb-memory-server": "^11.3.0",
@@ -90,6 +91,9 @@
     "@haruhimemoe/osu": {
       "optional": true
     },
+    "@haruhimemoe/ui": {
+      "optional": true
+    },
     "better-auth": {
       "optional": true
     },
@@ -118,6 +122,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.5.14",
     "@haruhimemoe/osu": "0.2.0",
+    "@haruhimemoe/ui": "0.5.0",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
     "@types/node": "26.6.2",