@haruhimemoe/ui 0.6.0 → 0.8.0

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

@@ -1,18 +1,19 @@
 /**
  * @file src/components/shell/SiteFooter.tsx
- * @desc Site footer: labelled link columns from data (entries without an href show as text with
+ * @desc Site footer: link columns from data under one nav landmark, each a section headed by its title (entries without an href show as text with
  *       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)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import type { ComponentProps, ReactNode } from "react";
+import type { HeadingLevel } from "../basics/cardStyles.js";
 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. */
+/** One footer column: a title (its heading, which names the column's section) and its entries. */
 export type SiteFooterColumn = {
     title: string;
     items: readonly SiteLinkItem[];
@@ -21,6 +22,10 @@ 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;
+    /** The one nav landmark around the columns. Default "Footer". Keep it unlike the header's. */
+    navLabel?: string | undefined;
+    /** The column titles' heading level. Default 2. */
+    headingLevel?: HeadingLevel | 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).
@@ -49,4 +54,4 @@ export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
  *        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: ownColumns, tools, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, discordLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;
+export declare function SiteFooter({ columns: ownColumns, navLabel, headingLevel, tools, extra, finePrint, parentLink, parentHref, githubHref, githubLabel, discordHref, discordLabel, className, ...props }: SiteFooterProps): import("react").JSX.Element;

package/dist/components/shell/SiteFooter.js

@@ -20,7 +20,7 @@ const GRID_COLUMNS = ["", "", "sm:grid-cols-2", "sm:grid-cols-3", "sm:grid-cols-
  *        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: 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 }) {
+export function SiteFooter({ columns: ownColumns = [], navLabel = "Footer", headingLevel = 2, 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));
@@ -34,5 +34,7 @@ export function SiteFooter({ columns: ownColumns = [], tools, extra, finePrint,
     // With the wordmark, the fine print gets its own line and the row holds wordmark + icon.
     // Without it, the fine print shares the row with the icon.
     const rowStart = parentLink ? _jsx(HaruhimeWordmarkLink, { href: parentHref }) : fine;
-    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("div", { className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, children: [_jsx("p", { className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), _jsx(LinkNote, { note: item.note })] }, linkItemKey(item)))) })] }, column.title))) })) : null, extra || fine || rowStart || icons ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || icons ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, icons] })) : null] })) : null] }) }));
+    const Heading = `h${headingLevel}`;
+    const columnId = (title) => `footer-${title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+    return (_jsx("footer", { className: cx("border-b4 border-t bg-b6 text-c3 text-sm", className), ...props, children: _jsxs("div", { className: "mx-auto flex max-w-5xl flex-col gap-8 px-4 py-10", children: [columns.length > 0 ? (_jsx("nav", { "aria-label": navLabel, className: cx("grid gap-8", GRID_COLUMNS[Math.min(columns.length, 4)]), children: columns.map((column) => (_jsxs("section", { "aria-labelledby": columnId(column.title), children: [_jsx(Heading, { id: columnId(column.title), className: "mb-3 font-bold text-c4 text-xs uppercase tracking-wide", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.items.map((item) => (_jsxs("li", { children: [item.href ? (_jsx(AutoLink, { href: item.href, className: "wrap-anywhere transition-colors hover:text-c1", children: item.label })) : (_jsx("span", { children: item.label })), _jsx(LinkNote, { note: item.note })] }, linkItemKey(item)))) })] }, column.title))) })) : null, extra || fine || rowStart || icons ? (_jsxs("div", { className: "flex flex-col gap-3 border-b4 border-t pt-6", children: [extra, parentLink ? fine : null, rowStart || icons ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [rowStart, icons] })) : null] })) : null] }) }));
 }

package/dist/components/tables/Table.d.ts

@@ -5,9 +5,9 @@
  *       Server-safe. Fill it with THead, TBody, Th and Td.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
-import type { ComponentProps, ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 /** Every native `<table>` prop (including `ref`), plus a caption and the wrapper's classes. */
 export type TableProps = ComponentProps<"table"> & {
     /** Names the table for screen readers. Shown above it unless `hideCaption`. */
@@ -16,6 +16,8 @@ export type TableProps = ComponentProps<"table"> & {
     hideCaption?: boolean | undefined;
     /** Classes for the wrapper `<div>` that scrolls sideways. */
     wrapperClassName?: string | undefined;
+    /** The scroll wrapper's accessible name when there is no caption. Default "Table". */
+    scrollLabel?: string | undefined;
 };
 /**
  * @function Table
@@ -23,4 +25,4 @@ export type TableProps = ComponentProps<"table"> & {
  *        wrapperClassName; `className` and `ref` go on the `<table>`
  * @returns {JSX.Element} an `overflow-x-auto` `<div>` around the `<table>` and its caption
  */
-export declare function Table({ caption, hideCaption, wrapperClassName, className, children, ...props }: TableProps): import("react").JSX.Element;
+export declare function Table({ caption, hideCaption, wrapperClassName, scrollLabel, className, children, ...props }: TableProps): import("react").JSX.Element;

package/dist/components/tables/Table.js

@@ -1,4 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file src/components/tables/Table.tsx
+ * @desc A data table on the apps' look: full width, small left-aligned text, in a wrapper that
+ *       scrolls sideways on phones, with an optional caption (visible, or for screen readers only).
+ *       Server-safe. Fill it with THead, TBody, Th and Td.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { useId } from "react";
 import { cx } from "../../utils/cx.js";
 import { FIELD_LABEL } from "../forms/fieldStyles.js";
 /**
@@ -7,6 +17,9 @@ import { FIELD_LABEL } from "../forms/fieldStyles.js";
  *        wrapperClassName; `className` and `ref` go on the `<table>`
  * @returns {JSX.Element} an `overflow-x-auto` `<div>` around the `<table>` and its caption
  */
-export function Table({ caption, hideCaption = false, wrapperClassName, className, children, ...props }) {
-    return (_jsx("div", { className: cx("overflow-x-auto", wrapperClassName), children: _jsxs("table", { className: cx("w-full text-left text-sm", className), ...props, children: [caption ? (_jsx("caption", { className: hideCaption ? "sr-only" : `mb-2 text-left ${FIELD_LABEL}`, children: caption })) : null, children] }) }));
+export function Table({ caption, hideCaption = false, wrapperClassName, scrollLabel = "Table", className, children, ...props }) {
+    const captionId = useId();
+    return (_jsx("section", { 
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region needs keyboard focus
+        tabIndex: 0, "aria-labelledby": caption ? captionId : undefined, "aria-label": caption ? undefined : scrollLabel, className: cx("overflow-x-auto", wrapperClassName), children: _jsxs("table", { className: cx("w-full text-left text-sm", className), ...props, children: [caption ? (_jsx("caption", { id: captionId, className: hideCaption ? "sr-only" : `mb-2 text-left ${FIELD_LABEL}`, children: caption })) : null, children] }) }));
 }

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  *       their own "use client" directive, so this barrel is safe to import from Server Components.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 export { AsyncButton, type AsyncButtonProps } from "./components/actions/AsyncButton.js";
 export { CopyButton, type CopyButtonProps } from "./components/actions/CopyButton.js";
@@ -50,6 +50,13 @@ export { JsonLd, type JsonLdProps } from "./components/meta/JsonLd.js";
 export { type BeatmapStatKey, BeatmapStats, type BeatmapStatsProps, } from "./components/osu/BeatmapStats.js";
 export { ModBadge, type ModBadgeProps } from "./components/osu/ModBadge.js";
 export { StarRating, type StarRatingProps } from "./components/osu/StarRating.js";
+export { CommandPalette } from "./components/palette/CommandPalette.js";
+export { CommandPaletteButton, type CommandPaletteButtonProps, } from "./components/palette/CommandPaletteButton.js";
+export { evaluate, formatResult } from "./components/palette/calc.js";
+export { type FuzzyMatch, fuzzyScore } from "./components/palette/fuzzy.js";
+export { openCommandPalette } from "./components/palette/paletteEvents.js";
+export { type SiteCommandsOptions, siteCommands } from "./components/palette/siteCommands.js";
+export type { ArgChoice, ArgSpec, Command, CommandPaletteProps, Page, PaletteContext, Provider, } from "./components/palette/types.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";

package/dist/index.js

@@ -5,7 +5,7 @@
  *       their own "use client" directive, so this barrel is safe to import from Server Components.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 // Actions
 export { AsyncButton } from "./components/actions/AsyncButton.js";
@@ -55,6 +55,13 @@ export { JsonLd } from "./components/meta/JsonLd.js";
 export { BeatmapStats, } from "./components/osu/BeatmapStats.js";
 export { ModBadge } from "./components/osu/ModBadge.js";
 export { StarRating } from "./components/osu/StarRating.js";
+// Palette
+export { CommandPalette } from "./components/palette/CommandPalette.js";
+export { CommandPaletteButton, } from "./components/palette/CommandPaletteButton.js";
+export { evaluate, formatResult } from "./components/palette/calc.js";
+export { fuzzyScore } from "./components/palette/fuzzy.js";
+export { openCommandPalette } from "./components/palette/paletteEvents.js";
+export { siteCommands } from "./components/palette/siteCommands.js";
 // Shell
 export { HeaderMenu, } from "./components/shell/HeaderMenu.js";
 export { HARUHIME_TOOLS, haruhimeToolsColumn, } from "./components/shell/haruhimeTools.js";

package/dist/theme.css

@@ -10,12 +10,12 @@
  *         @import "@haruhimemoe/ui/theme.css";
  *
  *       Set --hue on :root to recolor everything (default 333, pink). Some hues need --h2-l
- *       (h2 lightness, default 45%) or --h1-l (h1 lightness, default 70%) moved to keep text at
- *       4.5:1; the README lists values. Load Nunito with next/font as the --font-nunito variable;
+ *       (h2 lightness, default 45%) or --h1-l (h1 lightness, default 76%, which clears 4.5:1 on
+ *       b5 at every hue) moved to keep text at 4.5:1; the README lists values. Load Nunito with next/font as the --font-nunito variable;
  *       without it the sans stack falls back to the system font.
  * @author David @dvhsh (https://dvh.sh)
  * @created Wed Sep 23, 2026
- * @modified Wed Sep 23, 2026
+ * @modified Sat Oct 3, 2026
  */
 
 /* This file ships as dist/theme.css, so './' is the package's compiled components. */
@@ -39,7 +39,7 @@
   --color-c3: hsl(var(--hue) 40% 80%);
   --color-c4: hsl(var(--hue) 40% 70%);
 
-  --color-h1: hsl(var(--hue) 100% var(--h1-l, 70%));
+  --color-h1: hsl(var(--hue) 100% var(--h1-l, 76%));
   --color-h2: hsl(var(--hue) 50% var(--h2-l, 45%));
 
   --font-sans: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haruhimemoe/ui",
-  "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.",
+  "version": "0.8.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, a command palette and the site header and footer.",
   "keywords": [
     "osu",
     "osu!",
@@ -50,11 +50,14 @@
     "build": "bun run clean && tsc -p tsconfig.build.json && node -e \"require('node:fs').copyFileSync('src/theme.css','dist/theme.css')\"",
     "check": "biome check .",
     "check:fix": "biome check --write .",
-    "typecheck": "tsc --noEmit && tsc -p scripts/consumer-fixture/tsconfig.json",
+    "typecheck": "tsc --noEmit && tsc -p scripts/consumer-fixture/tsconfig.json && tsc -p playground/tsconfig.json",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "check:consumer": "node scripts/check-consumer.mjs",
+    "play": "next dev playground --webpack",
+    "play:build": "next build playground --webpack",
+    "play:axe": "node scripts/axe-playground.mjs",
     "prepublishOnly": "bun run check && bun run typecheck && bun run test && bun run build"
   },
   "dependencies": {
@@ -67,6 +70,7 @@
     "tailwindcss": ">=4.1.0 <5"
   },
   "devDependencies": {
+    "@axe-core/playwright": "4.13.0",
     "@biomejs/biome": "2.5.14",
     "@tailwindcss/postcss": "4.3.3",
     "@testing-library/dom": "10.4.2",
@@ -81,6 +85,7 @@
     "axe-core": "4.13.0",
     "jsdom": "30.1.1",
     "next": "16.3.6",
+    "playwright": "1.63.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "tailwindcss": "4.3.3",