@haruhimemoe/ui 0.8.0 → 0.10.0

package/dist/components/mdx/MdxPre.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file src/components/mdx/MdxPre.tsx
+ * @desc react-markdown/MDX's `pre` override: a fenced code block (a `<pre>` wrapping a single
+ *       child with a `language-*` class, a `data-meta` prop, or the literal `code` element type)
+ *       is handed to CodeBlock with its parsed meta; detecting the fence by the child's props
+ *       rather than only `child.type === "code"` means an app that overrides the `code` component
+ *       (through `mdxComponents`' own map or MDX's `useMDXComponents`) still gets highlighting.
+ *       Anything else renders as a plain, focusable `<pre>`. Drops the `node` prop react-markdown
+ *       passes to every component.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type ComponentProps } from "react";
+/** Every native `<pre>` prop, plus the `node` react-markdown passes (dropped). */
+export type MdxPreProps = ComponentProps<"pre"> & {
+    node?: unknown;
+};
+/**
+ * @function MdxPre
+ * @param props {MdxPreProps} native pre props; a single `code` child carries the language class
+ *        and the fence's meta string in `data-meta`
+ * @returns {JSX.Element} a CodeBlock for a fenced `code` child, otherwise a plain, focusable pre
+ */
+export declare function MdxPre({ node: _node, children, ...props }: MdxPreProps): import("react").JSX.Element;

package/dist/components/mdx/MdxPre.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file src/components/mdx/MdxPre.tsx
+ * @desc react-markdown/MDX's `pre` override: a fenced code block (a `<pre>` wrapping a single
+ *       child with a `language-*` class, a `data-meta` prop, or the literal `code` element type)
+ *       is handed to CodeBlock with its parsed meta; detecting the fence by the child's props
+ *       rather than only `child.type === "code"` means an app that overrides the `code` component
+ *       (through `mdxComponents`' own map or MDX's `useMDXComponents`) still gets highlighting.
+ *       Anything else renders as a plain, focusable `<pre>`. Drops the `node` prop react-markdown
+ *       passes to every component.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { Children, isValidElement } from "react";
+import { CodeBlock } from "./CodeBlock.js";
+import { parseCodeMeta } from "./parseCodeMeta.js";
+import { textOf } from "./textOf.js";
+/**
+ * @function MdxPre
+ * @param props {MdxPreProps} native pre props; a single `code` child carries the language class
+ *        and the fence's meta string in `data-meta`
+ * @returns {JSX.Element} a CodeBlock for a fenced `code` child, otherwise a plain, focusable pre
+ */
+export function MdxPre({ node: _node, children, ...props }) {
+    const [child] = Children.toArray(children);
+    const isFence = isValidElement(child) &&
+        (child.type === "code" ||
+            /(?:^|\s)language-/.test(child.props.className ?? "") ||
+            child.props["data-meta"] !== undefined);
+    if (!isFence || !isValidElement(child)) {
+        return (_jsx("pre", { 
+            // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region needs keyboard focus
+            tabIndex: 0, ...props, children: children }));
+    }
+    const lang = /(?:^|\s)language-(\S+)/.exec(child.props.className ?? "")?.[1];
+    const { title, highlight } = parseCodeMeta(child.props["data-meta"]);
+    return (_jsx(CodeBlock, { code: textOf(child.props.children), lang: lang, title: title, highlight: highlight }));
+}

package/dist/components/mdx/MdxTable.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file src/components/mdx/MdxTable.tsx
+ * @desc react-markdown/MDX's `table` override: wraps the table in a named, focusable scroll
+ *       region (a table can overflow its column on narrow screens), named by its caption when
+ *       one is given. Drops the `node` prop react-markdown passes to every component.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type ComponentProps } from "react";
+/** Every native `<table>` prop, plus the `node` react-markdown passes (dropped). */
+export type MdxTableProps = ComponentProps<"table"> & {
+    node?: unknown;
+};
+/**
+ * @function MdxTable
+ * @param props {MdxTableProps} native table props; a `caption` child names the scroll region
+ * @returns {JSX.Element} a horizontally scrollable, focusable, labelled region wrapping the table
+ */
+export declare function MdxTable({ node: _node, children, ...props }: MdxTableProps): import("react").JSX.Element;

package/dist/components/mdx/MdxTable.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file src/components/mdx/MdxTable.tsx
+ * @desc react-markdown/MDX's `table` override: wraps the table in a named, focusable scroll
+ *       region (a table can overflow its column on narrow screens), named by its caption when
+ *       one is given. Drops the `node` prop react-markdown passes to every component.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { Children, isValidElement } from "react";
+import { textOf } from "./textOf.js";
+/**
+ * @function MdxTable
+ * @param props {MdxTableProps} native table props; a `caption` child names the scroll region
+ * @returns {JSX.Element} a horizontally scrollable, focusable, labelled region wrapping the table
+ */
+export function MdxTable({ node: _node, children, ...props }) {
+    const caption = Children.toArray(children).find((child) => isValidElement(child) && child.type === "caption");
+    return (_jsx("div", { role: "group", "aria-label": textOf(caption) || "Table", 
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region needs keyboard focus
+        tabIndex: 0, className: "overflow-x-auto", children: _jsx("table", { ...props, children: children }) }));
+}

package/dist/components/mdx/highlighter.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file src/components/mdx/highlighter.ts
+ * @desc The highlighter CodeBlock asks for. Nothing here names Shiki outside `import type`, so
+ *       an app without Shiki builds: `@haruhimemoe/ui/shiki` (src/shiki.ts) registers the real
+ *       loader when an app imports it. The loader lives in a `globalThis` slot keyed by
+ *       `Symbol.for`, so it survives duplicate copies of this module. The first highlighter is
+ *       cached; with no loader registered, or a loader that rejects, code renders plain (warned
+ *       once, outside production) rather than throwing.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import type { HighlighterCore } from "shiki/core";
+/** The Shiki CSS-variables theme name CodeBlock renders with. */
+export declare const THEME = "haruhime";
+/** Loads a Shiki highlighter: what `@haruhimemoe/ui/shiki` registers. */
+export type HighlighterLoader = () => Promise<HighlighterCore>;
+/**
+ * @function setHighlighterLoader
+ * @param loader {HighlighterLoader} loads the Shiki highlighter; replaces any earlier one
+ * @returns {void} registers the loader in the global slot and drops the cached highlighter
+ */
+export declare const setHighlighterLoader: (loader: HighlighterLoader) => void;
+/**
+ * @function getHighlighter
+ * @param loader {HighlighterLoader | undefined} loads the highlighter; defaults to the registered
+ *        one, overridable in tests
+ * @returns {Promise<HighlighterCore | null>} the cached highlighter, or null when no loader is
+ *          registered or it failed to load
+ */
+export declare const getHighlighter: (loader?: HighlighterLoader | undefined) => Promise<HighlighterCore | null>;
+/**
+ * @function resetHighlighter
+ * @returns {void} clears the registered loader, the cached highlighter and the warned flag
+ *          (tests only)
+ */
+export declare const resetHighlighter: () => void;

package/dist/components/mdx/highlighter.js

@@ -0,0 +1,66 @@
+/**
+ * @file src/components/mdx/highlighter.ts
+ * @desc The highlighter CodeBlock asks for. Nothing here names Shiki outside `import type`, so
+ *       an app without Shiki builds: `@haruhimemoe/ui/shiki` (src/shiki.ts) registers the real
+ *       loader when an app imports it. The loader lives in a `globalThis` slot keyed by
+ *       `Symbol.for`, so it survives duplicate copies of this module. The first highlighter is
+ *       cached; with no loader registered, or a loader that rejects, code renders plain (warned
+ *       once, outside production) rather than throwing.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+/** The Shiki CSS-variables theme name CodeBlock renders with. */
+export const THEME = "haruhime";
+const SLOT = Symbol.for("@haruhimemoe/ui/highlighter");
+// No node types in the build (tsconfig.build.json "types": []), so read process through globalThis.
+const isProduction = () => globalThis.process?.env
+    ?.NODE_ENV === "production";
+let cached;
+let warned = false;
+const warnOnce = (message, error) => {
+    if (warned || isProduction())
+        return;
+    warned = true;
+    if (error === undefined)
+        console.warn(message);
+    else
+        console.warn(message, error);
+};
+/**
+ * @function setHighlighterLoader
+ * @param loader {HighlighterLoader} loads the Shiki highlighter; replaces any earlier one
+ * @returns {void} registers the loader in the global slot and drops the cached highlighter
+ */
+export const setHighlighterLoader = (loader) => {
+    globalThis[SLOT] = loader;
+    cached = undefined;
+};
+/**
+ * @function getHighlighter
+ * @param loader {HighlighterLoader | undefined} loads the highlighter; defaults to the registered
+ *        one, overridable in tests
+ * @returns {Promise<HighlighterCore | null>} the cached highlighter, or null when no loader is
+ *          registered or it failed to load
+ */
+export const getHighlighter = (loader = globalThis[SLOT]) => {
+    if (!loader) {
+        warnOnce('@haruhimemoe/ui: code blocks aren\'t highlighted. Install shiki and add `import "@haruhimemoe/ui/shiki";` once, e.g. in mdx-components.tsx.');
+        return Promise.resolve(null);
+    }
+    cached ??= loader().catch((error) => {
+        warnOnce("@haruhimemoe/ui: Shiki didn't load, so code blocks aren't highlighted.", error);
+        return null;
+    });
+    return cached;
+};
+/**
+ * @function resetHighlighter
+ * @returns {void} clears the registered loader, the cached highlighter and the warned flag
+ *          (tests only)
+ */
+export const resetHighlighter = () => {
+    globalThis[SLOT] = undefined;
+    cached = undefined;
+    warned = false;
+};

package/dist/components/mdx/mdxComponents.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file src/components/mdx/mdxComponents.ts
+ * @desc The element override map for @next/mdx's `useMDXComponents` and react-markdown's
+ *       `components` prop: links, headings (h2/h3), fenced code, tables and callout blockquotes.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { MdxBlockquote } from "./MdxBlockquote.js";
+import { MdxLink } from "./MdxLink.js";
+import { MdxPre } from "./MdxPre.js";
+import { MdxTable } from "./MdxTable.js";
+/** The element overrides for @next/mdx's useMDXComponents and react-markdown's `components`. */
+export declare const mdxComponents: {
+    a: typeof MdxLink;
+    blockquote: typeof MdxBlockquote;
+    h2: ({ node: _node, id, children, ...props }: import("./MdxHeading.js").MdxHeadingProps) => import("react").JSX.Element;
+    h3: ({ node: _node, id, children, ...props }: import("./MdxHeading.js").MdxHeadingProps) => import("react").JSX.Element;
+    pre: typeof MdxPre;
+    table: typeof MdxTable;
+};

package/dist/components/mdx/mdxComponents.js

@@ -0,0 +1,22 @@
+/**
+ * @file src/components/mdx/mdxComponents.ts
+ * @desc The element override map for @next/mdx's `useMDXComponents` and react-markdown's
+ *       `components` prop: links, headings (h2/h3), fenced code, tables and callout blockquotes.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { MdxBlockquote } from "./MdxBlockquote.js";
+import { MdxH2, MdxH3 } from "./MdxHeading.js";
+import { MdxLink } from "./MdxLink.js";
+import { MdxPre } from "./MdxPre.js";
+import { MdxTable } from "./MdxTable.js";
+/** The element overrides for @next/mdx's useMDXComponents and react-markdown's `components`. */
+export const mdxComponents = {
+    a: MdxLink,
+    blockquote: MdxBlockquote,
+    h2: MdxH2,
+    h3: MdxH3,
+    pre: MdxPre,
+    table: MdxTable,
+};

package/dist/components/mdx/parseCodeMeta.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file src/components/mdx/parseCodeMeta.ts
+ * @desc Parses a fenced code block's meta string (the text after the language on ```ts fences)
+ *       into a title (`title="..."` or `title='...'`) and a sorted, deduped list of highlighted
+ *       line numbers (`{1,3-5}`), capped at 10000 lines so a huge or malicious range can't hang
+ *       the render.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+/** A parsed code fence meta string. */
+export type CodeMeta = {
+    title?: string;
+    highlight: number[];
+};
+/**
+ * @function parseCodeMeta
+ * @param meta {string | null | undefined} the code fence's meta string, if any
+ * @returns {CodeMeta} the title (when present) and the sorted, deduped, capped highlight lines
+ */
+export declare const parseCodeMeta: (meta?: string | null) => CodeMeta;

package/dist/components/mdx/parseCodeMeta.js

@@ -0,0 +1,40 @@
+/**
+ * @file src/components/mdx/parseCodeMeta.ts
+ * @desc Parses a fenced code block's meta string (the text after the language on ```ts fences)
+ *       into a title (`title="..."` or `title='...'`) and a sorted, deduped list of highlighted
+ *       line numbers (`{1,3-5}`), capped at 10000 lines so a huge or malicious range can't hang
+ *       the render.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+const TITLE = /\btitle=(?:"([^"]*)"|'([^']*)')/;
+const RANGES = /\{([^}]*)\}/;
+const MAX_LINES = 10000;
+/**
+ * @function parseCodeMeta
+ * @param meta {string | null | undefined} the code fence's meta string, if any
+ * @returns {CodeMeta} the title (when present) and the sorted, deduped, capped highlight lines
+ */
+export const parseCodeMeta = (meta) => {
+    const text = meta ?? "";
+    const lines = new Set();
+    for (const part of RANGES.exec(text)?.[1]?.split(",") ?? []) {
+        const match = /^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(part);
+        if (!match)
+            continue;
+        let from = Number(match[1]);
+        let to = match[2] === undefined ? from : Number(match[2]);
+        if (from > to)
+            [from, to] = [to, from];
+        from = Math.max(from, 1);
+        for (let line = from; line <= to && lines.size < MAX_LINES; line++)
+            lines.add(line);
+    }
+    const title = TITLE.exec(text);
+    const result = { highlight: [...lines].sort((a, b) => a - b) };
+    const name = title?.[1] ?? title?.[2];
+    if (name)
+        result.title = name;
+    return result;
+};

package/dist/components/mdx/textOf.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file src/components/mdx/textOf.ts
+ * @desc Flattens a ReactNode tree to plain text: strings and numbers pass through, arrays and
+ *       element children are recursively joined, and null/undefined/boolean contribute nothing.
+ *       Used to get a code block's plain text for Shiki and the copy button, since react-markdown
+ *       hands components React children, not a string.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type ReactNode } from "react";
+/**
+ * @function textOf
+ * @param node {ReactNode} the node (or tree of nodes) to flatten
+ * @returns {string} the concatenated text content
+ */
+export declare const textOf: (node: ReactNode) => string;

package/dist/components/mdx/textOf.js

@@ -0,0 +1,28 @@
+/**
+ * @file src/components/mdx/textOf.ts
+ * @desc Flattens a ReactNode tree to plain text: strings and numbers pass through, arrays and
+ *       element children are recursively joined, and null/undefined/boolean contribute nothing.
+ *       Used to get a code block's plain text for Shiki and the copy button, since react-markdown
+ *       hands components React children, not a string.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { isValidElement } from "react";
+/**
+ * @function textOf
+ * @param node {ReactNode} the node (or tree of nodes) to flatten
+ * @returns {string} the concatenated text content
+ */
+export const textOf = (node) => {
+    if (node === null || node === undefined || typeof node === "boolean")
+        return "";
+    if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
+        return String(node);
+    }
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if (isValidElement(node))
+        return textOf(node.props.children);
+    return "";
+};

package/dist/components/osu/PlayerCard.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @file src/components/osu/PlayerCard.tsx
+ * @desc osu!-web's user card (the 120px card from the friends list and user tooltips) from plain
+ *       props: cover under a b5 overlay, 60px avatar, country flag, team flag and supporter heart,
+ *       the username (the whole card links to the profile), and an optional status row. It never
+ *       fetches: the app passes a snapshot, so nothing here claims live data unless told to. The
+ *       online ring's lime is osu!'s own green-light, hue-independent like StarRating's spectrum.
+ *       Keyboard focus outlines the whole card in h1 as well as the username's own ring.
+ *       Plain `<img>`s, not next/image, so apps need no `images.remotePatterns` for osu!'s hosts.
+ *       Server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+import type { ComponentProps, ReactNode } from "react";
+/** An osu! team: its name (the flag's alt text and tooltip) and its flag image. */
+export type PlayerTeam = {
+    /** The team's name. */
+    name: string;
+    /** The team flag's URL (osu! serves them from assets.ppy.sh). */
+    flagUrl: string;
+};
+/** Every native `<div>` prop except children, plus the player's snapshot. */
+export type PlayerCardProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The name shown on the card, as-is. */
+    username: string;
+    /** The osu! user id: the avatar comes from a.ppy.sh and the card links to the profile. */
+    userId?: number | undefined;
+    /** Replaces the profile link; `null` draws no link even with a `userId`. */
+    href?: string | null | undefined;
+    /** Replaces the a.ppy.sh avatar. Without it and a `userId`, a letter stands in. */
+    avatarUrl?: string | undefined;
+    /** The profile cover, drawn behind everything. None leaves the card plain b4. */
+    coverUrl?: string | undefined;
+    /** ISO 3166-1 alpha-2 code; draws osu!'s flag. Anything else draws none. */
+    countryCode?: string | undefined;
+    /** The flag's alt text (default: the English name from Intl, else the code). */
+    countryName?: string | undefined;
+    /** The player's osu! team, drawn as its flag beside the country's. */
+    team?: PlayerTeam | undefined;
+    /** Draws the supporter heart. */
+    supporter?: boolean | undefined;
+    /** What screen readers hear for the heart (default "osu! supporter"). */
+    supporterLabel?: string | undefined;
+    /** Draws the status ring. Leave it out for static data: the card never guesses a status. */
+    status?: "online" | "offline" | undefined;
+    /** The bottom row's main line (default "Online" or "Offline" when `status` is set). */
+    statusText?: ReactNode;
+    /** A small line above it ("Last seen 29 days ago", "formerly RMarc"). */
+    statusNote?: ReactNode;
+};
+/**
+ * @function PlayerCard
+ * @param props {PlayerCardProps} the player's snapshot (name, id, cover, flags, supporter,
+ *        status) and native div props
+ * @returns {JSX.Element} a 120px osu!-web user card; the whole card links to the profile when it
+ *          has a link
+ */
+export declare function PlayerCard({ username, userId, href, avatarUrl, coverUrl, countryCode, countryName, team, supporter, supporterLabel, status, statusText, statusNote, className, ...props }: PlayerCardProps): import("react").JSX.Element;

package/dist/components/osu/PlayerCard.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../utils/cx.js";
+import { AutoLink } from "../basics/AutoLink.js";
+import { avatarUrl as defaultAvatarUrl, countryName as defaultCountryName, flagUrl, isAnimatedImage, normalizeCountryCode, profileUrl, } from "./playerLinks.js";
+/** The first letter or digit of a name, for the stand-in avatar. */
+function initialOf(name) {
+    return name.match(/[\p{L}\p{N}]/u)?.[0]?.toUpperCase() ?? "?";
+}
+/** Whether a status line has something to show: not null, undefined, a boolean or "". */
+function shown(node) {
+    return node != null && typeof node !== "boolean" && node !== "";
+}
+/** The supporter heart: osu!'s pink-circle badge with a white heart. */
+function SupporterHeart({ label }) {
+    return (_jsx("span", { role: "img", "aria-label": label, className: "inline-flex size-[26px] shrink-0 items-center justify-center rounded-full bg-h2 text-c1", children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", className: "size-3.5", fill: "currentColor", children: _jsx("path", { d: "M12 21s-7.5-4.6-10-9.3C.3 8.4 2.2 4.5 6 4.5c2.2 0 3.6 1.2 4.5 2.5l1.5 2 1.5-2c.9-1.3 2.3-2.5 4.5-2.5 3.8 0 5.7 3.9 4 7.2C19.5 16.4 12 21 12 21z" }) }) }));
+}
+/**
+ * @function PlayerCard
+ * @param props {PlayerCardProps} the player's snapshot (name, id, cover, flags, supporter,
+ *        status) and native div props
+ * @returns {JSX.Element} a 120px osu!-web user card; the whole card links to the profile when it
+ *          has a link
+ */
+export function PlayerCard({ username, userId, href, avatarUrl, coverUrl, countryCode, countryName, team, supporter = false, supporterLabel = "osu! supporter", status, statusText, statusNote, className, ...props }) {
+    const link = href === null ? null : (href ?? (userId === undefined ? null : profileUrl(userId)));
+    const avatar = avatarUrl ?? (userId === undefined ? null : defaultAvatarUrl(userId));
+    const code = normalizeCountryCode(countryCode);
+    const flag = flagUrl(countryCode);
+    const mainLine = shown(statusText)
+        ? statusText
+        : status === "online"
+            ? "Online"
+            : status
+                ? "Offline"
+                : null;
+    const note = shown(statusNote) ? statusNote : null;
+    const hasStatusRow = status !== undefined || mainLine !== null || note !== null;
+    return (_jsxs("div", { className: cx("relative isolate flex h-[120px] flex-col justify-between overflow-hidden rounded-[10px] bg-b4 text-c1", link &&
+            "hover:outline-2 hover:outline-c3 has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-h1", className), ...props, children: [coverUrl ? (_jsx("img", { src: coverUrl, alt: "", loading: "lazy", decoding: "async", className: cx("absolute inset-0 -z-10 size-full object-cover", isAnimatedImage(coverUrl) && "motion-reduce:hidden") })) : null, coverUrl ? _jsx("div", { "aria-hidden": "true", className: "absolute inset-0 -z-10 bg-b5/80" }) : null, _jsxs("div", { className: "flex gap-2.5 p-2.5", children: [avatar ? (_jsx("img", { src: avatar, alt: "", width: 60, height: 60, loading: "lazy", decoding: "async", className: "size-[60px] shrink-0 rounded-md bg-b4 object-cover" })) : (_jsx("span", { "aria-hidden": "true", className: "flex size-[60px] shrink-0 items-center justify-center rounded-md bg-b3 font-bold text-2xl text-c3", children: initialOf(username) })), _jsxs("div", { className: "grid min-w-0 flex-1 grid-rows-[26px_1fr]", children: [_jsxs("div", { className: "flex h-[26px] items-center gap-1.5", children: [flag && code ? (_jsx("img", { src: flag, alt: countryName ?? defaultCountryName(code), width: 36, height: 26, loading: "lazy", decoding: "async", className: "h-[26px] w-auto shrink-0" })) : null, team ? (_jsx("img", { src: team.flagUrl, alt: team.name, width: 52, height: 26, loading: "lazy", decoding: "async", className: "h-[26px] w-[52px] shrink-0 rounded-sm object-cover" })) : null, supporter ? _jsx(SupporterHeart, { label: supporterLabel }) : null] }), _jsx("div", { className: "flex min-w-0 items-center", children: link ? (_jsx(AutoLink, { href: link, className: "truncate font-semibold text-base text-c1 after:absolute after:inset-0", children: username })) : (_jsx("span", { className: "truncate font-semibold text-base", children: username })) })] })] }), hasStatusRow ? (_jsxs("div", { className: "flex items-center gap-2.5 px-2.5 pb-2.5", children: [_jsx("div", { className: "flex w-[60px] shrink-0 justify-center", children: status ? (_jsx("span", { "aria-hidden": "true", className: cx("size-[25px] rounded-full border-4", status === "online" ? "border-lime-400" : "border-b6") })) : null }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [note !== null ? _jsx("span", { className: "truncate text-c2 text-xs", children: note }) : null, mainLine !== null ? _jsx("span", { className: "truncate text-sm", children: mainLine }) : null] })] })) : null] }));
+}

package/dist/components/osu/playerLinks.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @file src/components/osu/playerLinks.ts
+ * @desc The osu! URLs and names PlayerCard builds from plain props: profile and avatar from a
+ *       user id, osu-web's own country flag SVG from a two-letter code, the country's English
+ *       name for the flag's alt text, and whether a cover is an animated GIF. Pure, server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+/**
+ * @function profileUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's osu! profile page
+ */
+export declare const profileUrl: (id: number) => string;
+/**
+ * @function avatarUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's current avatar on a.ppy.sh (osu! serves the default for none)
+ */
+export declare const avatarUrl: (id: number) => string;
+/**
+ * @function normalizeCountryCode
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code, any case, maybe padded
+ * @returns {string | null} the code in capitals, or null when it isn't two ASCII letters
+ */
+export declare function normalizeCountryCode(code: string | undefined): string | null;
+/**
+ * @function flagUrl
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code
+ * @returns {string | null} osu-web's flag SVG (named by the flag emoji's regional-indicator code
+ *          points, lowercase hex joined by "-"), or null for anything but two ASCII letters
+ */
+export declare function flagUrl(code: string | undefined): string | null;
+/**
+ * @function countryName
+ * @param code {string} an ISO 3166-1 alpha-2 code
+ * @returns {string} the region's English name from Intl, or the code in capitals when Intl
+ *          doesn't know it
+ */
+export declare function countryName(code: string): string;
+/**
+ * @function isAnimatedImage
+ * @param url {string} an image URL
+ * @returns {boolean} true when the path ends in .gif (before any query or hash)
+ */
+export declare const isAnimatedImage: (url: string) => boolean;

package/dist/components/osu/playerLinks.js

@@ -0,0 +1,65 @@
+/**
+ * @file src/components/osu/playerLinks.ts
+ * @desc The osu! URLs and names PlayerCard builds from plain props: profile and avatar from a
+ *       user id, osu-web's own country flag SVG from a two-letter code, the country's English
+ *       name for the flag's alt text, and whether a cover is an animated GIF. Pure, server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sun Oct 4, 2026
+ * @modified Sun Oct 4, 2026
+ */
+const REGIONAL_INDICATOR_A = 0x1f1e6;
+/**
+ * @function profileUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's osu! profile page
+ */
+export const profileUrl = (id) => `https://osu.ppy.sh/users/${id}`;
+/**
+ * @function avatarUrl
+ * @param id {number} the osu! user id
+ * @returns {string} the user's current avatar on a.ppy.sh (osu! serves the default for none)
+ */
+export const avatarUrl = (id) => `https://a.ppy.sh/${id}`;
+/**
+ * @function normalizeCountryCode
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code, any case, maybe padded
+ * @returns {string | null} the code in capitals, or null when it isn't two ASCII letters
+ */
+export function normalizeCountryCode(code) {
+    const upper = code?.trim().toUpperCase() ?? "";
+    return /^[A-Z]{2}$/.test(upper) ? upper : null;
+}
+/**
+ * @function flagUrl
+ * @param code {string | undefined} an ISO 3166-1 alpha-2 code
+ * @returns {string | null} osu-web's flag SVG (named by the flag emoji's regional-indicator code
+ *          points, lowercase hex joined by "-"), or null for anything but two ASCII letters
+ */
+export function flagUrl(code) {
+    const upper = normalizeCountryCode(code);
+    if (!upper)
+        return null;
+    const points = [...upper].map((letter) => (REGIONAL_INDICATOR_A + letter.charCodeAt(0) - 65).toString(16));
+    return `https://osu.ppy.sh/assets/images/flags/${points.join("-")}.svg`;
+}
+/**
+ * @function countryName
+ * @param code {string} an ISO 3166-1 alpha-2 code
+ * @returns {string} the region's English name from Intl, or the code in capitals when Intl
+ *          doesn't know it
+ */
+export function countryName(code) {
+    const upper = code.trim().toUpperCase();
+    try {
+        return new Intl.DisplayNames(["en"], { type: "region" }).of(upper) ?? upper;
+    }
+    catch {
+        return upper;
+    }
+}
+/**
+ * @function isAnimatedImage
+ * @param url {string} an image URL
+ * @returns {boolean} true when the path ends in .gif (before any query or hash)
+ */
+export const isAnimatedImage = (url) => /\.gif(?:[?#]|$)/i.test(url);

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { HaruhimeWordmarkLink, type HaruhimeWordmarkLinkProps, } from "./compone
 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 { PlayerCard, type PlayerCardProps, type PlayerTeam, } from "./components/osu/PlayerCard.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";

package/dist/index.js

@@ -54,6 +54,7 @@ export { JsonLd } from "./components/meta/JsonLd.js";
 // osu!
 export { BeatmapStats, } from "./components/osu/BeatmapStats.js";
 export { ModBadge } from "./components/osu/ModBadge.js";
+export { PlayerCard, } from "./components/osu/PlayerCard.js";
 export { StarRating } from "./components/osu/StarRating.js";
 // Palette
 export { CommandPalette } from "./components/palette/CommandPalette.js";

package/dist/mdx.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file src/mdx.ts
+ * @desc The `@haruhimemoe/ui/mdx` subpath: MDX element overrides and the pieces apps wire them
+ *       up with. Every export here is a server component or a plain server-safe function; the
+ *       only client code (CodeCopyButton) is rendered internally by CodeBlock, never exported.
+ *       `CodeBlock` colorizes code only when the app installs `shiki` (an optional peer
+ *       dependency) and imports `@haruhimemoe/ui/shiki` once; otherwise code renders as plain,
+ *       unstyled text.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+export { Callout, type CalloutProps, type CalloutType } from "./components/mdx/Callout.js";
+export { CodeBlock, type CodeBlockProps } from "./components/mdx/CodeBlock.js";
+export { mdxComponents } from "./components/mdx/mdxComponents.js";
+export { type CodeMeta, parseCodeMeta } from "./components/mdx/parseCodeMeta.js";
+export { slugify } from "./remark/slugify.js";

package/dist/mdx.js

@@ -0,0 +1,17 @@
+/**
+ * @file src/mdx.ts
+ * @desc The `@haruhimemoe/ui/mdx` subpath: MDX element overrides and the pieces apps wire them
+ *       up with. Every export here is a server component or a plain server-safe function; the
+ *       only client code (CodeCopyButton) is rendered internally by CodeBlock, never exported.
+ *       `CodeBlock` colorizes code only when the app installs `shiki` (an optional peer
+ *       dependency) and imports `@haruhimemoe/ui/shiki` once; otherwise code renders as plain,
+ *       unstyled text.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+export { Callout } from "./components/mdx/Callout.js";
+export { CodeBlock } from "./components/mdx/CodeBlock.js";
+export { mdxComponents } from "./components/mdx/mdxComponents.js";
+export { parseCodeMeta } from "./components/mdx/parseCodeMeta.js";
+export { slugify } from "./remark/slugify.js";