@haruhimemoe/ui 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.6.0] - 2026-09-28
+
+### Added
+
+- `SiteFooter`'s `tools` prop: a "haruhime tools" column linking the other live haruhime.moe tools (packs, pools, bb) and "All tools" on www, with the current tool left out. `HARUHIME_TOOLS` and `haruhimeToolsColumn` export the same data for a custom footer.
+
 ## [0.5.1] - 2026-09-28
 
 ### Security
@@ -92,7 +98,8 @@ 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.5.1...HEAD
+[unreleased]: https://github.com/haruhimemoe/ui/compare/v0.6.0...HEAD
+[0.6.0]: https://github.com/haruhimemoe/ui/compare/v0.5.1...v0.6.0
 [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

package/README.md

@@ -760,6 +760,7 @@ Link columns, an extra slot, fine print, the haruhime.moe wordmark, a GitHub ico
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `columns` | `readonly SiteFooterColumn[]` | `[]` | Each column is a `<nav>` named by its title, which shows above the list. Up to four columns side by side from `sm` up. |
+| `tools` | `HaruhimeToolsOptions` | none | Adds a "haruhime tools" column: the other live haruhime.moe tools as "name: blurb" links, then "All tools" on www. Options: `current` (the tool this footer is on, left out), `title` (`"haruhime tools"`), `allLabel` (`"All tools"`, `false` drops it), `allHref` (`"https://www.haruhime.moe"`), `position` (where among `columns`, default `1`, clamped). Since 0.6.0. |
 | `extra` | `ReactNode` | none | Shown above the fine print, e.g. a "clear local data" button. |
 | `finePrint` | `ReactNode` | none | One line of small print, in a `<p>`. |
 | `parentLink` | `boolean` | `true` | Show the haruhime.moe wordmark linking the parent site. With it, the last row holds the wordmark and the icons, and the fine print sits above. Without it, the fine print shares the row with the icons. |
@@ -769,6 +770,8 @@ Link columns, an extra slot, fine print, the haruhime.moe wordmark, a GitHub ico
 | `discordHref` | `string` | none | Where the Discord icon links, such as your server's invite (`https://discord.gg/...`). Without it there is no Discord icon. The icon sits before the GitHub icon at the same size. It stays white (`text-c1`) and dims on hover instead of changing color, since Discord's brand guidelines ask that the logo not be recolored. Since 0.3.0. |
 | `discordLabel` | `string` | `"Discord"` | The Discord link's accessible name. Since 0.4.0. |
 
+`HARUHIME_TOOLS` (each `{ id, name, href, blurb }`, type `HaruhimeTool`, ids `HaruhimeToolId`: `"packs" | "pools" | "bb"`) and `haruhimeToolsColumn(options)` (the same column as plain data, for a footer you lay out yourself) are exported too. Since 0.6.0. They are the one place outside the wordmark that names the haruhime.moe tools: a tool joins the list when it goes live.
+
 #### `LinkTabs`
 
 Since 0.4.0. A row of link tabs (Pools / Maps, All / Hidden): a named `<nav>` with a list of pill links. The current one gets `aria-current="page"` and a `b3` pill (underlined in forced colors mode). These are links, not ARIA tabs, since each loads its own URL. A Server Component: you say which is current. Every native `<nav>` prop except `children`. Type: `LinkTabItem`.

package/dist/components/shell/SiteFooter.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file src/components/shell/SiteFooter.tsx
  * @desc Site footer: labelled link columns from data (entries without an href show as text with
- *       a small note, like "soon"), an optional extra slot, one line of fine print, the
+ *       a small note, like "soon"), an optional "haruhime tools" column linking the other tools,
+ *       an optional extra slot, one line of fine print, the
  *       haruhime.moe wordmark linking the parent site, a GitHub icon link, and an optional
  *       Discord icon link beside it (white, as Discord's brand guidelines ask).
  * @author David @dvhsh (https://dvh.sh)
@@ -9,6 +10,7 @@
  * @modified Mon Sep 28, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
+import { type HaruhimeToolsOptions } from "./haruhimeTools.js";
 import { type SiteLinkItem } from "./links.js";
 /** One footer column: a title (also the nav landmark's name) and its entries. */
 export type SiteFooterColumn = {
@@ -19,6 +21,11 @@ export type SiteFooterColumn = {
 export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
     /** Link columns, left to right. Internal hrefs use `next/link`, external ones a plain `<a>`. */
     columns?: readonly SiteFooterColumn[] | undefined;
+    /**
+     * Adds the "haruhime tools" column (haruhimeToolsColumn): the other haruhime.moe tools and
+     * "All tools". `current` leaves this tool out; `position` places it (default 1).
+     */
+    tools?: HaruhimeToolsOptions | undefined;
     /** Rendered above the fine print, e.g. a "clear local data" control. */
     extra?: ReactNode;
     /** One line of small print, e.g. a trademark notice. */
@@ -38,8 +45,8 @@ export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
 };
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ * @param props {SiteFooterProps} columns, the tools column, extra slot, fine print, parent, GitHub and Discord
  *        links and their names, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export declare function SiteFooter({ columns, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, discordLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;
+export declare function SiteFooter({ columns: ownColumns, tools, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, discordLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;

package/dist/components/shell/SiteFooter.js

@@ -4,6 +4,7 @@ import { AutoLink } from "../basics/AutoLink.js";
 import { DiscordIcon } from "../icons/DiscordIcon.js";
 import { GitHubIcon } from "../icons/GitHubIcon.js";
 import { HaruhimeWordmarkLink } from "../icons/HaruhimeWordmarkLink.js";
+import { haruhimeToolsColumn } from "./haruhimeTools.js";
 import { LinkNote } from "./LinkNote.js";
 import { linkItemKey } from "./links.js";
 // The GitHub icon link in the bottom row.
@@ -15,11 +16,16 @@ const DISCORD_LINK = "shrink-0 text-c1 transition-opacity hover:opacity-80";
 const GRID_COLUMNS = ["", "", "sm:grid-cols-2", "sm:grid-cols-3", "sm:grid-cols-4"];
 /**
  * @function SiteFooter
- * @param props {SiteFooterProps} columns, extra slot, fine print, parent, GitHub and Discord
+ * @param props {SiteFooterProps} columns, the tools column, extra slot, fine print, parent, GitHub and Discord
  *        links and their names, and native footer props
  * @returns {JSX.Element} the footer: columns on top, then extra, fine print and the brand row
  */
-export function SiteFooter({ columns = [], extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", discordHref, discordLabel = "Discord", className, ...props }) {
+export function SiteFooter({ columns: ownColumns = [], tools, extra, finePrint, parentLink = true, parentHref = "https://www.haruhime.moe", githubHref = "https://github.com/haruhimemoe", githubLabel = "haruhimemoe on GitHub", discordHref, discordLabel = "Discord", className, ...props }) {
+    const columns = [...ownColumns];
+    if (tools) {
+        const at = Math.max(0, Math.min(tools.position ?? 1, columns.length));
+        columns.splice(at, 0, haruhimeToolsColumn(tools));
+    }
     const fine = finePrint ? _jsx("p", { className: "text-c4 text-xs", children: finePrint }) : null;
     const github = githubHref ? (_jsx("a", { href: githubHref, "aria-label": githubLabel, className: ICON_LINK, children: _jsx(GitHubIcon, {}) })) : null;
     const discord = discordHref ? (_jsx("a", { href: discordHref, "aria-label": discordLabel, className: DISCORD_LINK, children: _jsx(DiscordIcon, {}) })) : null;

package/dist/components/shell/haruhimeTools.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @file src/components/shell/haruhimeTools.ts
+ * @desc The haruhime.moe tools as data (HARUHIME_TOOLS) and the footer column that links them
+ *       from each tool (haruhimeToolsColumn): every other tool plus "All tools" on the parent
+ *       site. Sibling subdomains are separate sites to search engines, so each tool links the
+ *       others. Server-safe: no directive, no hooks.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+import type { SiteLinkItem } from "./links.js";
+/** A live haruhime.moe tool's id: its subdomain. */
+export type HaruhimeToolId = "packs" | "pools" | "bb";
+/** One live haruhime.moe tool: its name, home page and what it is in a few words. */
+export type HaruhimeTool = {
+    id: HaruhimeToolId;
+    name: string;
+    href: string;
+    /** A few words after the name in the footer, like "mappool downloads". */
+    blurb: string;
+};
+/** The live haruhime.moe tools in launch order. A tool joins this list once it's live. */
+export declare const HARUHIME_TOOLS: readonly HaruhimeTool[];
+/** haruhimeToolsColumn's (and SiteFooter's `tools` prop's) options. */
+export type HaruhimeToolsOptions = {
+    /** The tool the footer sits on. It's left out of the list (its own column links it). */
+    current?: HaruhimeToolId | undefined;
+    /** The column's title (and nav landmark name). Default "haruhime tools". */
+    title?: string | undefined;
+    /** The last entry, linking the parent site. Default "All tools"; false leaves it out. */
+    allLabel?: string | false | undefined;
+    /** Where "All tools" links. Default "https://www.haruhime.moe". */
+    allHref?: string | undefined;
+    /** Where SiteFooter puts the column among `columns` (0 is first). Default 1, after the first. */
+    position?: number | undefined;
+};
+/**
+ * @function haruhimeToolsColumn
+ * @param options {HaruhimeToolsOptions} the current tool, title and "All tools" link
+ * @returns {{ title: string; items: SiteLinkItem[] }} a footer column: each other tool as
+ *          "name: blurb", then "All tools" on the parent site
+ */
+export declare function haruhimeToolsColumn(options?: HaruhimeToolsOptions): {
+    title: string;
+    items: SiteLinkItem[];
+};

package/dist/components/shell/haruhimeTools.js

@@ -0,0 +1,30 @@
+/**
+ * @file src/components/shell/haruhimeTools.ts
+ * @desc The haruhime.moe tools as data (HARUHIME_TOOLS) and the footer column that links them
+ *       from each tool (haruhimeToolsColumn): every other tool plus "All tools" on the parent
+ *       site. Sibling subdomains are separate sites to search engines, so each tool links the
+ *       others. Server-safe: no directive, no hooks.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Mon Sep 28, 2026
+ */
+/** The live haruhime.moe tools in launch order. A tool joins this list once it's live. */
+export const HARUHIME_TOOLS = [
+    { id: "packs", name: "packs", href: "https://packs.haruhime.moe", blurb: "mappool downloads" },
+    { id: "pools", name: "pools", href: "https://pools.haruhime.moe", blurb: "mappool builder" },
+    { id: "bb", name: "bb", href: "https://bb.haruhime.moe", blurb: "osu! BBCode editor" },
+];
+/**
+ * @function haruhimeToolsColumn
+ * @param options {HaruhimeToolsOptions} the current tool, title and "All tools" link
+ * @returns {{ title: string; items: SiteLinkItem[] }} a footer column: each other tool as
+ *          "name: blurb", then "All tools" on the parent site
+ */
+export function haruhimeToolsColumn(options = {}) {
+    const { current, title = "haruhime tools", allLabel = "All tools" } = options;
+    const items = HARUHIME_TOOLS.filter((tool) => tool.id !== current).map((tool) => ({ href: tool.href, label: `${tool.name}: ${tool.blurb}` }));
+    if (allLabel !== false) {
+        items.push({ href: options.allHref ?? "https://www.haruhime.moe", label: allLabel });
+    }
+    return { title, items };
+}

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { type BeatmapStatKey, BeatmapStats, type BeatmapStatsProps, } from "./co
 export { ModBadge, type ModBadgeProps } from "./components/osu/ModBadge.js";
 export { StarRating, type StarRatingProps } from "./components/osu/StarRating.js";
 export { HeaderMenu, type HeaderMenuItem, type HeaderMenuProps, } from "./components/shell/HeaderMenu.js";
+export { HARUHIME_TOOLS, type HaruhimeTool, type HaruhimeToolId, type HaruhimeToolsOptions, haruhimeToolsColumn, } from "./components/shell/haruhimeTools.js";
 export { type LinkTabItem, LinkTabs, type LinkTabsProps } from "./components/shell/LinkTabs.js";
 export type { SiteLinkItem } from "./components/shell/links.js";
 export { NavLinks, type NavLinksProps, type SiteNavAlign } from "./components/shell/NavLinks.js";

package/dist/index.js

@@ -57,6 +57,7 @@ export { ModBadge } from "./components/osu/ModBadge.js";
 export { StarRating } from "./components/osu/StarRating.js";
 // Shell
 export { HeaderMenu, } from "./components/shell/HeaderMenu.js";
+export { HARUHIME_TOOLS, haruhimeToolsColumn, } from "./components/shell/haruhimeTools.js";
 export { LinkTabs } from "./components/shell/LinkTabs.js";
 export { NavLinks } from "./components/shell/NavLinks.js";
 export { PageShell } from "./components/shell/PageShell.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haruhimemoe/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "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",