@haruhimemoe/ui 0.7.0 → 0.9.0

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.7.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.9.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!",
@@ -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"
@@ -50,11 +63,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": {
@@ -64,15 +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",
@@ -81,8 +108,11 @@
     "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",
+    "remark-gfm": "4.0.1",
+    "shiki": "4.5.0",
     "tailwindcss": "4.3.3",
     "typescript": "7.0.2",
     "vitest": "5.0.1"