@haruhimemoe/next-kit 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.8.0] - 2026-10-05
+
+### Changed
+- **Breaking.** The `@haruhimemoe/ui` peer range is now `^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0` (0.15 to 0.17 not yet published): `DeleteAccountForm` needs ui's `ConfirmDialog`.
+- `DeleteAccountForm` is a "Delete my account" button that opens a dialog: what goes is its description, the username is typed there, and a refusal or no answer is said in the dialog, which stays open. Once the account is deleted, focus moves to the "Your account is deleted." line.
+- The account components use ui's text tones (`Text`, `textClasses`) and Button's own width. No change in how they look.
+
 ## [0.7.0] - 2026-10-05
 
 ### Added
@@ -89,7 +96,8 @@ 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.6.2...HEAD
+[unreleased]: https://github.com/haruhimemoe/next-kit/compare/v0.8.0...HEAD
+[0.8.0]: https://github.com/haruhimemoe/next-kit/compare/v0.7.0...v0.8.0
 [0.6.2]: https://github.com/haruhimemoe/next-kit/compare/v0.6.1...v0.6.2
 [0.6.1]: https://github.com/haruhimemoe/next-kit/compare/v0.6.0...v0.6.1
 [0.6.0]: https://github.com/haruhimemoe/next-kit/compare/v0.5.0...v0.6.0

package/README.md

@@ -32,7 +32,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, `@haruhimemoe/ui` ^0.5.0 \|\| ^0.6.0 \|\| ^0.7.0 \|\| ^0.8.0 \|\| ^0.9.0 \|\| ^0.10.0 \|\| ^0.11.0 \|\| ^0.12.0 \|\| ^0.13.0 (with its theme set up) |
+| `auth-react` | `react` ^19.3.0, `next` ^16.3.6, `@haruhimemoe/ui` ^0.14.0 \|\| ^0.15.0 \|\| ^0.16.0 \|\| ^0.17.0 (with its theme set up) |
 | `seo` | `next` ^16.3.6 types only (nothing loads at runtime) |
 | `testing` | `vitest` ^5.0.1, `msw` ^2.15.0, `mongodb-memory-server` ^11.3.0 |
 | `api-keys` | `mongodb` ^7.6.0 |
@@ -304,7 +304,7 @@ The command prints one `pass` or `FAIL` line per standard, names each missing fi
 | `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>`. |
+| `DeleteAccountForm({ username, appName, deletes, onDeleted, endpoint?, homeHref?, homeLabel?, fetcher? })` | Since 0.2.0. A "Delete my account" button (0.8.0; an in-page `TypeToConfirm` before) that opens ui's `ConfirmDialog`: `deletes` is its description, the username must be typed, then "Delete for good" sends `DELETE endpoint` (default `/api/account`) with `{ username }`. 204: `onDeleted`, "Your account is deleted." (focused) and home. Another 2xx: `onDeleted` and the answer's `notice` after that line, staying. A refusal shows `error.message` (else "Deleting failed (status).") in the dialog; no answer, "Couldn't reach <appName>. Your account is still there." The dialog stays open on both. Needs ui 0.14.0. |
 | `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. |
 
 ### seo

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

@@ -9,7 +9,7 @@
  *       (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
+ * @modified Mon Oct 5, 2026
  */
 import { type HeaderMenuItem } from "@haruhimemoe/ui";
 import type { ReactNode } from "react";

package/dist/auth-react/AccountMenu.js

@@ -9,11 +9,11 @@
  *       (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
+ * @modified Mon Oct 5, 2026
  */
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HeaderMenu } from "@haruhimemoe/ui";
+import { HeaderMenu, textClasses } 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";
@@ -29,7 +29,11 @@ export function AccountMenu({ account, items, signOut, onSignedOut, avatarSrc =
     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 }));
+        return (_jsx("a", { href: signInHref(pathname || "/", signInPath), className: textClasses({
+                tone: "muted",
+                bold: true,
+                className: "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

@@ -1,15 +1,16 @@
 /**
  * @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.
+ * @desc "Delete my account": a button that opens ui's ConfirmDialog (no confirm()), where what
+ *       goes is the description and the osu! username is typed before "Delete for good" sends one
+ *       DELETE with it to the app's endpoint. 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 in the dialog, no answer says the
+ *       app couldn't be reached, nothing was deleted and the dialog stays open. Once it's gone
+ *       the button never comes back and focus lands on the line that says so.
  *       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
+ * @modified Mon Oct 5, 2026
  */
 import { type ReactNode } from "react";
 /** DeleteAccountForm's props. */
@@ -35,6 +36,6 @@ export type DeleteAccountFormProps = {
  * @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
+ * @returns {ReactNode} the "Delete my account" trigger and its confirm dialog, or what happened
  */
 export declare function DeleteAccountForm({ username, appName, deletes, onDeleted, endpoint, homeHref, homeLabel, fetcher, }: DeleteAccountFormProps): ReactNode;

package/dist/auth-react/DeleteAccountForm.js

@@ -1,19 +1,20 @@
 /**
  * @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.
+ * @desc "Delete my account": a button that opens ui's ConfirmDialog (no confirm()), where what
+ *       goes is the description and the osu! username is typed before "Delete for good" sends one
+ *       DELETE with it to the app's endpoint. 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 in the dialog, no answer says the
+ *       app couldn't be reached, nothing was deleted and the dialog stays open. Once it's gone
+ *       the button never comes back and focus lands on the line that says so.
  *       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
+ * @modified Mon Oct 5, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buttonClasses, TypeToConfirm } from "@haruhimemoe/ui";
+import { buttonClasses, ConfirmDialog } from "@haruhimemoe/ui";
 import { useRouter } from "next/navigation.js";
 import { useId, useState } from "react";
 const messageOf = async (response) => {
@@ -30,41 +31,40 @@ const messageOf = async (response) => {
  * @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
+ * @returns {ReactNode} the "Delete my account" trigger and its confirm dialog, 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 doneId = `${useId()}-done`;
+    // Once it's gone: what more to say. The button doesn't come back, so no second delete.
     const [done, setDone] = useState(null);
+    const unreachable = `Couldn't reach ${appName}. Your account is still there.`;
+    // Throws to keep the dialog open with what went wrong.
     const remove = async () => {
-        setError(null);
+        let response;
         try {
-            const response = await fetcher(endpoint, {
+            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.`);
+            throw new Error(unreachable);
         }
+        if (!response.ok)
+            throw new Error(await messageOf(response));
+        onDeleted();
+        if (response.status === 204) {
+            setDone("");
+            router.push(homeHref);
+            return;
+        }
+        const body = (await response.json().catch(() => ({})));
+        setDone(typeof body.notice === "string" ? body.notice : "");
     };
     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 (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { id: doneId, role: "status", tabIndex: -1, className: "text-c2 text-sm outline-none", children: `Your account is deleted. ${done}`.trim() }), _jsx("a", { href: homeHref, className: buttonClasses({ variant: "secondary" }), 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 }) }));
+    return (_jsx(ConfirmDialog, { trigger: "Delete my account", triggerProps: { variant: "danger" }, title: "Delete your account?", description: deletes, tone: "destructive", typeToConfirm: username, confirmLabel: "Delete for good", pendingLabel: "Deleting\u2026", failedMessage: (error) => (error instanceof Error ? error.message : unreachable), returnFocus: () => document.getElementById(doneId), onConfirm: remove }));
 }

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

@@ -7,7 +7,7 @@
  *       and pools (src/components/auth/RestoreSignedIn.tsx, body-identical).
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Mon Oct 5, 2026
  */
 import { type ReactNode } from "react";
 /** RestoreSignedIn's props. */

package/dist/auth-react/RestoreSignedIn.js

@@ -7,14 +7,15 @@
  *       and pools (src/components/auth/RestoreSignedIn.tsx, body-identical).
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Mon Oct 5, 2026
  */
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@haruhimemoe/ui";
 import { useRouter } from "next/navigation.js";
 import { useEffect } from "react";
 const readDocumentCookie = () => document.cookie;
-const SIGNING_IN = _jsx("p", { className: "text-c3 text-sm", children: "Signing you in\u2026" });
+const SIGNING_IN = _jsx(Text, { tone: "muted", children: "Signing you in\u2026" });
 /**
  * @function RestoreSignedIn
  * @param props {RestoreSignedInProps} the store, the marker check, `next` and what to show

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

@@ -7,7 +7,7 @@
  *       (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
+ * @modified Mon Oct 5, 2026
  */
 import { type ReactNode } from "react";
 import { type OsuSignIn } from "./sign-in.js";

package/dist/auth-react/SignInWithOsu.js

@@ -7,11 +7,11 @@
  *       (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
+ * @modified Mon Oct 5, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@haruhimemoe/ui";
+import { Button, Text } from "@haruhimemoe/ui";
 import { useState } from "react";
 import { osuSignIn } from "./sign-in.js";
 const FAILED = "Couldn't start osu! sign-in. Try again.";
@@ -54,5 +54,5 @@ export function SignInWithOsu({ next, signIn, signInPath, label = "Sign in with
         }
         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] }));
+    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(Text, { role: "alert", tone: "error", bold: true, children: error })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haruhimemoe/next-kit",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "The Next.js plumbing the haruhime.moe tools 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, the signed-in marker and account store for the browser, SEO: metadata, robots.txt, sitemaps, JSON-LD and llms.txt, and per-app API keys and the /api/v1 guard.",
   "keywords": [
     "nextjs",
@@ -104,7 +104,7 @@
   },
   "peerDependencies": {
     "@haruhimemoe/osu": "^0.2.0 || ^0.3.0 || ^0.4.0",
-    "@haruhimemoe/ui": "^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0",
+    "@haruhimemoe/ui": "^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0",
     "@haruhimemoe/vcs": "^0.1.0",
     "better-auth": "^1.7.5",
     "mongodb": "^7.6.0",
@@ -154,7 +154,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.5.14",
     "@haruhimemoe/osu": "0.2.0",
-    "@haruhimemoe/ui": "0.5.0",
+    "@haruhimemoe/ui": "0.14.0",
     "@haruhimemoe/vcs": "0.1.0",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",