@haruhimemoe/ui 0.8.0 → 0.10.0

package/dist/remark/callouts.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file src/remark/callouts.ts
+ * @desc A remark plugin for GitHub-style callouts: a blockquote whose first paragraph starts
+ *       with `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]` or `[!CAUTION]` (case-insensitive)
+ *       gets `data.hProperties.dataCallout` set to one of three rendered types, and the marker
+ *       text is stripped from the paragraph (the paragraph itself is dropped if the marker was
+ *       its only content).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type MdNode } from "./mdast.js";
+/** The three callout types this plugin renders. */
+export type CalloutType = "note" | "tip" | "warning";
+/**
+ * @function remarkCallouts
+ * @returns {(tree: MdNode) => void} a remark transformer that types matching blockquotes and
+ *          strips their marker text
+ */
+export declare const remarkCallouts: () => (tree: MdNode) => void;

package/dist/remark/callouts.js

@@ -0,0 +1,58 @@
+/**
+ * @file src/remark/callouts.ts
+ * @desc A remark plugin for GitHub-style callouts: a blockquote whose first paragraph starts
+ *       with `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]` or `[!CAUTION]` (case-insensitive)
+ *       gets `data.hProperties.dataCallout` set to one of three rendered types, and the marker
+ *       text is stripped from the paragraph (the paragraph itself is dropped if the marker was
+ *       its only content).
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { setProperty, walk } from "./mdast.js";
+const TYPES = {
+    note: "note",
+    tip: "tip",
+    important: "tip",
+    warning: "warning",
+    caution: "warning",
+};
+const MARKER = /^\[!(note|tip|important|warning|caution)\][ \t]*(?:\r?\n)?/i;
+/**
+ * @function remarkCallouts
+ * @returns {(tree: MdNode) => void} a remark transformer that types matching blockquotes and
+ *          strips their marker text
+ */
+export const remarkCallouts = () => (tree) => {
+    walk(tree, (node) => {
+        if (node.type !== "blockquote")
+            return;
+        const paragraph = node.children?.[0];
+        if (paragraph?.type !== "paragraph" || !paragraph.children)
+            return;
+        // A parser may split "[!NOTE]" over several text nodes: join the leading run first.
+        let end = 0;
+        while (paragraph.children[end]?.type === "text")
+            end++;
+        if (end === 0)
+            return;
+        const text = paragraph.children
+            .slice(0, end)
+            .map((child) => child.value ?? "")
+            .join("");
+        const match = MARKER.exec(text);
+        if (!match)
+            return;
+        const key = match[1].toLowerCase();
+        const calloutType = TYPES[key];
+        if (!calloutType)
+            return;
+        setProperty(node, "dataCallout", calloutType);
+        const rest = text.slice(match[0].length);
+        paragraph.children.splice(0, end, ...(rest ? [{ type: "text", value: rest }] : []));
+        if (paragraph.children[0]?.type === "break")
+            paragraph.children.shift();
+        if (paragraph.children.length === 0)
+            node.children?.shift();
+    });
+};

package/dist/remark/codeMeta.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file src/remark/codeMeta.ts
+ * @desc A remark plugin that copies a fenced code block's meta string (the text after the
+ *       language on the opening fence, e.g. `title="a.ts" {2}`) onto the node as
+ *       `data.hProperties.dataMeta`, so mdast-util-to-hast renders it as `data-meta` and
+ *       CodeBlock can read it client-side.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type MdNode } from "./mdast.js";
+/**
+ * @function remarkCodeMeta
+ * @returns {(tree: MdNode) => void} a remark transformer that sets `dataMeta` on every code node
+ *          that has a non-empty `meta` string
+ */
+export declare const remarkCodeMeta: () => (tree: MdNode) => void;

package/dist/remark/codeMeta.js

@@ -0,0 +1,22 @@
+/**
+ * @file src/remark/codeMeta.ts
+ * @desc A remark plugin that copies a fenced code block's meta string (the text after the
+ *       language on the opening fence, e.g. `title="a.ts" {2}`) onto the node as
+ *       `data.hProperties.dataMeta`, so mdast-util-to-hast renders it as `data-meta` and
+ *       CodeBlock can read it client-side.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { setProperty, walk } from "./mdast.js";
+/**
+ * @function remarkCodeMeta
+ * @returns {(tree: MdNode) => void} a remark transformer that sets `dataMeta` on every code node
+ *          that has a non-empty `meta` string
+ */
+export const remarkCodeMeta = () => (tree) => {
+    walk(tree, (node) => {
+        if (node.type === "code" && node.meta)
+            setProperty(node, "dataMeta", node.meta);
+    });
+};

package/dist/remark/headingIds.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file src/remark/headingIds.ts
+ * @desc A remark plugin that gives every depth-2 and depth-3 heading a GitHub-style id slugged
+ *       from its text, deduplicated across the document. A heading that already has an id
+ *       (`data.hProperties.id`) keeps it, and a heading whose text slugs to an empty string gets
+ *       no id at all.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { type MdNode } from "./mdast.js";
+/**
+ * @function remarkHeadingIds
+ * @returns {(tree: MdNode) => void} a remark transformer that ids depth-2/3 headings
+ */
+export declare const remarkHeadingIds: () => (tree: MdNode) => void;

package/dist/remark/headingIds.js

@@ -0,0 +1,28 @@
+/**
+ * @file src/remark/headingIds.ts
+ * @desc A remark plugin that gives every depth-2 and depth-3 heading a GitHub-style id slugged
+ *       from its text, deduplicated across the document. A heading that already has an id
+ *       (`data.hProperties.id`) keeps it, and a heading whose text slugs to an empty string gets
+ *       no id at all.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { setProperty, textContent, walk } from "./mdast.js";
+import { createSlugger } from "./slugify.js";
+/**
+ * @function remarkHeadingIds
+ * @returns {(tree: MdNode) => void} a remark transformer that ids depth-2/3 headings
+ */
+export const remarkHeadingIds = () => (tree) => {
+    const slug = createSlugger();
+    walk(tree, (node) => {
+        if (node.type !== "heading" || (node.depth !== 2 && node.depth !== 3))
+            return;
+        if (node.data?.hProperties?.id)
+            return;
+        const id = slug(textContent(node));
+        if (id)
+            setProperty(node, "id", id);
+    });
+};

package/dist/remark/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file src/remark/index.ts
+ * @desc The public entry point for `@haruhimemoe/ui/remark`: one remark plugin for MDX and
+ *       react-markdown that combines code meta, callouts and heading ids, plus the individual
+ *       plugins and the slug helpers for callers who want only one piece.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import type { MdNode } from "./mdast.js";
+export type { CalloutType } from "./callouts.js";
+export { remarkCallouts } from "./callouts.js";
+export { remarkCodeMeta } from "./codeMeta.js";
+export { remarkHeadingIds } from "./headingIds.js";
+export { createSlugger, slugify } from "./slugify.js";
+/** Which of the three plugins `remarkHaruhime` runs; each defaults to on. */
+export type RemarkHaruhimeOptions = {
+    codeMeta?: boolean;
+    callouts?: boolean;
+    headingIds?: boolean;
+};
+/**
+ * @function remarkHaruhime
+ * @param options {RemarkHaruhimeOptions} per-plugin opt-outs; omit to run all three
+ * @returns {(tree: MdNode) => void} a remark transformer running code meta, callouts and heading
+ *          ids over one tree. A default export, because Turbopack only takes MDX plugins by
+ *          module name: `remarkPlugins: ["@haruhimemoe/ui/remark"]`.
+ */
+export default function remarkHaruhime(options?: RemarkHaruhimeOptions): (tree: MdNode) => void;

package/dist/remark/index.js

@@ -0,0 +1,33 @@
+/**
+ * @file src/remark/index.ts
+ * @desc The public entry point for `@haruhimemoe/ui/remark`: one remark plugin for MDX and
+ *       react-markdown that combines code meta, callouts and heading ids, plus the individual
+ *       plugins and the slug helpers for callers who want only one piece.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { remarkCallouts } from "./callouts.js";
+import { remarkCodeMeta } from "./codeMeta.js";
+import { remarkHeadingIds } from "./headingIds.js";
+export { remarkCallouts } from "./callouts.js";
+export { remarkCodeMeta } from "./codeMeta.js";
+export { remarkHeadingIds } from "./headingIds.js";
+export { createSlugger, slugify } from "./slugify.js";
+/**
+ * @function remarkHaruhime
+ * @param options {RemarkHaruhimeOptions} per-plugin opt-outs; omit to run all three
+ * @returns {(tree: MdNode) => void} a remark transformer running code meta, callouts and heading
+ *          ids over one tree. A default export, because Turbopack only takes MDX plugins by
+ *          module name: `remarkPlugins: ["@haruhimemoe/ui/remark"]`.
+ */
+export default function remarkHaruhime(options = {}) {
+    return (tree) => {
+        if (options.codeMeta !== false)
+            remarkCodeMeta()(tree);
+        if (options.callouts !== false)
+            remarkCallouts()(tree);
+        if (options.headingIds !== false)
+            remarkHeadingIds()(tree);
+    };
+}

package/dist/remark/mdast.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file src/remark/mdast.ts
+ * @desc The slice of an mdast node these remark plugins read and write, plus three small
+ *       helpers (`walk`, `setProperty`, `textContent`) that the plugins in this directory share.
+ *       No `unist-util-visit` or `@types/mdast` import: this type is the whole contract.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+/** The slice of an mdast node these plugins read and write. */
+export type MdNode = {
+    type: string;
+    children?: MdNode[];
+    value?: string;
+    meta?: string | null;
+    depth?: number;
+    data?: {
+        hProperties?: Record<string, unknown>;
+        [key: string]: unknown;
+    };
+};
+/**
+ * @function walk
+ * @param node {MdNode} the node to start from
+ * @param visit {(node: MdNode) => void} called on `node`, then on every descendant, depth first
+ * @returns {void}
+ */
+export declare const walk: (node: MdNode, visit: (node: MdNode) => void) => void;
+/**
+ * @function setProperty
+ * @param node {MdNode} the node to annotate
+ * @param key {string} the hast property name (camelCase, e.g. `dataMeta`)
+ * @param value {unknown} the property's value
+ * @returns {void} sets one HTML attribute that mdast-util-to-hast copies onto the rendered element
+ */
+export declare const setProperty: (node: MdNode, key: string, value: unknown) => void;
+/**
+ * @function textContent
+ * @param node {MdNode} the node to read
+ * @returns {string} the node's plain text: its value, or its children's text joined
+ */
+export declare const textContent: (node: MdNode) => string;

package/dist/remark/mdast.js

@@ -0,0 +1,37 @@
+/**
+ * @file src/remark/mdast.ts
+ * @desc The slice of an mdast node these remark plugins read and write, plus three small
+ *       helpers (`walk`, `setProperty`, `textContent`) that the plugins in this directory share.
+ *       No `unist-util-visit` or `@types/mdast` import: this type is the whole contract.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+/**
+ * @function walk
+ * @param node {MdNode} the node to start from
+ * @param visit {(node: MdNode) => void} called on `node`, then on every descendant, depth first
+ * @returns {void}
+ */
+export const walk = (node, visit) => {
+    visit(node);
+    for (const child of node.children ?? [])
+        walk(child, visit);
+};
+/**
+ * @function setProperty
+ * @param node {MdNode} the node to annotate
+ * @param key {string} the hast property name (camelCase, e.g. `dataMeta`)
+ * @param value {unknown} the property's value
+ * @returns {void} sets one HTML attribute that mdast-util-to-hast copies onto the rendered element
+ */
+export const setProperty = (node, key, value) => {
+    node.data ??= {};
+    node.data.hProperties = { ...node.data.hProperties, [key]: value };
+};
+/**
+ * @function textContent
+ * @param node {MdNode} the node to read
+ * @returns {string} the node's plain text: its value, or its children's text joined
+ */
+export const textContent = (node) => typeof node.value === "string" ? node.value : (node.children ?? []).map(textContent).join("");

package/dist/remark/slugify.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file src/remark/slugify.ts
+ * @desc GitHub-style heading slugs: lowercase, drop punctuation (keeping letters, marks, digits
+ *       and underscores from any script), turn each whitespace character into a hyphen, and
+ *       suffix repeats `-1`, `-2` the way GitHub's own heading anchors do.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+/**
+ * @function slugify
+ * @param text {string} the heading text
+ * @returns {string} a lowercase, hyphenated slug (letters/marks/digits/underscores from any
+ *          script survive; everything else but whitespace and existing hyphens is dropped)
+ */
+export declare const slugify: (text: string) => string;
+/**
+ * @function createSlugger
+ * @returns {(text: string) => string} a function that slugs `text` and, on a repeat (the slug
+ *          itself, or a literal heading that already claimed the suffixed form), appends `-1`,
+ *          `-2`, … until it finds an unused candidate, like GitHub's heading anchors
+ */
+export declare const createSlugger: () => ((text: string) => string);

package/dist/remark/slugify.js

@@ -0,0 +1,40 @@
+/**
+ * @file src/remark/slugify.ts
+ * @desc GitHub-style heading slugs: lowercase, drop punctuation (keeping letters, marks, digits
+ *       and underscores from any script), turn each whitespace character into a hyphen, and
+ *       suffix repeats `-1`, `-2` the way GitHub's own heading anchors do.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+/**
+ * @function slugify
+ * @param text {string} the heading text
+ * @returns {string} a lowercase, hyphenated slug (letters/marks/digits/underscores from any
+ *          script survive; everything else but whitespace and existing hyphens is dropped)
+ */
+export const slugify = (text) => text
+    .trim()
+    .toLowerCase()
+    .replace(/[^\p{L}\p{M}\p{N}\p{Pc}\s-]/gu, "")
+    .replace(/\s/g, "-");
+/**
+ * @function createSlugger
+ * @returns {(text: string) => string} a function that slugs `text` and, on a repeat (the slug
+ *          itself, or a literal heading that already claimed the suffixed form), appends `-1`,
+ *          `-2`, … until it finds an unused candidate, like GitHub's heading anchors
+ */
+export const createSlugger = () => {
+    const occurrences = new Map();
+    return (text) => {
+        const base = slugify(text);
+        let candidate = base;
+        while (occurrences.has(candidate)) {
+            const count = (occurrences.get(base) ?? 0) + 1;
+            occurrences.set(base, count);
+            candidate = `${base}-${count}`;
+        }
+        occurrences.set(candidate, 0);
+        return candidate;
+    };
+};

package/dist/shiki.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file src/shiki.ts
+ * @desc The `@haruhimemoe/ui/shiki` subpath: registers the Shiki loader CodeBlock highlights
+ *       with (a core highlighter, the CSS-variables theme, a fixed language set and the no-WASM
+ *       JS regex engine). Apps that render code install `shiki` and import this once, for its
+ *       side effect: `import "@haruhimemoe/ui/shiki";` (in mdx-components.tsx, say). Nothing
+ *       else in the package names Shiki, so an app that skips this import builds without it
+ *       and gets plain code blocks.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+export {};

package/dist/shiki.js

@@ -0,0 +1,38 @@
+/**
+ * @file src/shiki.ts
+ * @desc The `@haruhimemoe/ui/shiki` subpath: registers the Shiki loader CodeBlock highlights
+ *       with (a core highlighter, the CSS-variables theme, a fixed language set and the no-WASM
+ *       JS regex engine). Apps that render code install `shiki` and import this once, for its
+ *       side effect: `import "@haruhimemoe/ui/shiki";` (in mdx-components.tsx, say). Nothing
+ *       else in the package names Shiki, so an app that skips this import builds without it
+ *       and gets plain code blocks.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import { setHighlighterLoader, THEME } from "./components/mdx/highlighter.js";
+/**
+ * @function loadShiki
+ * @returns {Promise<HighlighterCore>} a Shiki core highlighter with the package's theme and
+ *          languages, loaded through dynamic import()
+ */
+const loadShiki = async () => {
+    const [{ createCssVariablesTheme, createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([import("shiki/core"), import("shiki/engine/javascript")]);
+    return createHighlighterCore({
+        themes: [createCssVariablesTheme({ name: THEME, variablePrefix: "--shiki-" })],
+        langs: [
+            import("shiki/langs/typescript.mjs"),
+            import("shiki/langs/tsx.mjs"),
+            import("shiki/langs/javascript.mjs"),
+            import("shiki/langs/json.mjs"),
+            import("shiki/langs/bash.mjs"),
+            import("shiki/langs/css.mjs"),
+            import("shiki/langs/html.mjs"),
+            import("shiki/langs/markdown.mjs"),
+            import("shiki/langs/diff.mjs"),
+            import("shiki/langs/yaml.mjs"),
+        ],
+        engine: createJavaScriptRegexEngine(),
+    });
+};
+setHighlighterLoader(loadShiki);

package/dist/theme.css

@@ -45,6 +45,24 @@
   --font-sans: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;
 }
 
+/* CodeBlock reads these as Shiki's CSS-variables theme. Every token keeps 4.5:1 against both b6
+   (the block's background) and b4 (the highlighted-line tint) at every integer --hue. The keyword
+   and link tokens get their own hue-derived value instead of var(--color-h1): that variable's
+   default lightness (76%) falls to 4.33:1 against b4 at hue 240. */
+:root {
+  --shiki-foreground: var(--color-c2);
+  --shiki-background: var(--color-b6);
+  --shiki-token-keyword: hsl(var(--hue) 100% 78%);
+  --shiki-token-string: hsl(calc(var(--hue) + 150) 55% 75%);
+  --shiki-token-string-expression: hsl(calc(var(--hue) + 150) 55% 75%);
+  --shiki-token-constant: hsl(calc(var(--hue) + 40) 55% 74%);
+  --shiki-token-function: hsl(calc(var(--hue) + 200) 55% 75%);
+  --shiki-token-parameter: hsl(calc(var(--hue) + 60) 55% 75%);
+  --shiki-token-comment: var(--color-c4);
+  --shiki-token-punctuation: var(--color-c3);
+  --shiki-token-link: hsl(var(--hue) 100% 78%);
+}
+
 @layer base {
   :focus-visible {
     outline: 2px solid var(--color-h1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haruhimemoe/ui",
-  "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.",
+  "version": "0.10.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 player cards, a command palette and the site header and footer.",
   "keywords": [
     "osu",
     "osu!",
@@ -26,6 +26,18 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./mdx": {
+      "types": "./dist/mdx.d.ts",
+      "default": "./dist/mdx.js"
+    },
+    "./remark": {
+      "types": "./dist/remark/index.d.ts",
+      "default": "./dist/remark/index.js"
+    },
+    "./shiki": {
+      "types": "./dist/shiki.d.ts",
+      "default": "./dist/shiki.js"
+    },
     "./theme.css": "./dist/theme.css",
     "./package.json": "./package.json"
   },
@@ -35,7 +47,8 @@
     "CHANGELOG.md"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./dist/shiki.js"
   ],
   "engines": {
     "node": ">=22.12"
@@ -67,16 +80,26 @@
     "next": ">=16.0.0 <17",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
+    "shiki": ">=4.5.0 <5",
     "tailwindcss": ">=4.1.0 <5"
   },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
     "@biomejs/biome": "2.5.14",
+    "@mdx-js/loader": "3.1.1",
+    "@mdx-js/react": "3.1.1",
+    "@next/mdx": "16.3.6",
     "@tailwindcss/postcss": "4.3.3",
     "@testing-library/dom": "10.4.2",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
     "@testing-library/user-event": "14.6.7",
+    "@types/mdx": "2.0.14",
     "@types/node": "26.6.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
@@ -88,6 +111,8 @@
     "playwright": "1.63.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
+    "remark-gfm": "4.0.1",
+    "shiki": "4.5.0",
     "tailwindcss": "4.3.3",
     "typescript": "7.0.2",
     "vitest": "5.0.1"