@haruhimemoe/ui 0.7.0 → 0.9.0

package/dist/components/palette/store.js

@@ -0,0 +1,135 @@
+/**
+ * @file src/components/palette/store.ts
+ * @desc The palette's state and reducer, pure: open or closed, a stack of page frames (each with
+ *       its own query, active row and provider results, so popping back restores where you
+ *       were), and the argument prompt in progress. Every key the palette handles is an action
+ *       here, so the rules test without a DOM. CommandPalette owns it through useReducer.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+const frame = (page) => ({ page, query: "", active: 0, providers: {} });
+/**
+ * @function initialState
+ * @returns {PaletteState} closed, empty
+ */
+export const initialState = () => ({ open: false, stack: [], arg: null });
+/**
+ * @function topFrame
+ * @param state {PaletteState} the state
+ * @returns {Frame | undefined} the page on top, undefined while closed
+ */
+export const topFrame = (state) => state.stack[state.stack.length - 1];
+const clamp = (index, count) => count === 0 ? 0 : Math.min(Math.max(index, 0), count - 1);
+const moved = (active, delta, count) => {
+    if (count === 0)
+        return 0;
+    if (delta === "home")
+        return 0;
+    if (delta === "end")
+        return count - 1;
+    return (active + delta + count) % count;
+};
+const withTop = (state, patch) => {
+    const top = topFrame(state);
+    if (!top)
+        return state;
+    return { ...state, stack: [...state.stack.slice(0, -1), { ...top, ...patch }] };
+};
+const withArg = (state, patch) => state.arg ? { ...state, arg: { ...state.arg, ...patch } } : state;
+/**
+ * @function reduce
+ * @param state {PaletteState} the state before
+ * @param action {PaletteAction} what happened
+ * @returns {PaletteState} the state after; the same object when nothing changes
+ */
+export function reduce(state, action) {
+    switch (action.type) {
+        case "open": {
+            const stack = [frame(action.root)];
+            if (action.page)
+                stack.push(frame(action.page));
+            return { open: true, stack, arg: null };
+        }
+        case "close":
+            return state.open ? { ...state, open: false } : state;
+        case "query":
+            return state.arg
+                ? withArg(state, { query: action.value, active: 0, error: undefined })
+                : withTop(state, { query: action.value, active: 0 });
+        case "active": {
+            const index = clamp(action.index, action.count);
+            const current = state.arg ? state.arg.active : topFrame(state)?.active;
+            if (index === current)
+                return state;
+            return state.arg ? withArg(state, { active: index }) : withTop(state, { active: index });
+        }
+        case "move": {
+            const current = state.arg ? state.arg.active : (topFrame(state)?.active ?? 0);
+            const active = moved(current, action.delta, action.count);
+            return state.arg ? withArg(state, { active }) : withTop(state, { active });
+        }
+        case "push":
+            return { ...state, stack: [...state.stack, frame(action.page)], arg: null };
+        case "pop": {
+            if (state.arg) {
+                if (state.arg.index === 0)
+                    return { ...state, arg: null };
+                const spec = state.arg.command.args?.[state.arg.index - 1];
+                const values = { ...state.arg.values };
+                if (spec)
+                    delete values[spec.name];
+                return withArg(state, {
+                    index: state.arg.index - 1,
+                    values,
+                    query: "",
+                    active: 0,
+                    error: undefined,
+                });
+            }
+            if (state.stack.length <= 1)
+                return state;
+            return { ...state, stack: state.stack.slice(0, -1) };
+        }
+        case "beginArgs":
+            return {
+                ...state,
+                arg: { command: action.command, index: 0, values: {}, query: "", active: 0 },
+            };
+        case "argAccept": {
+            if (!state.arg)
+                return state;
+            const specs = state.arg.command.args ?? [];
+            const spec = specs[state.arg.index];
+            if (!spec)
+                return { ...state, arg: null };
+            const values = { ...state.arg.values, [spec.name]: action.value };
+            if (state.arg.index + 1 >= specs.length)
+                return { ...state, arg: null };
+            return withArg(state, {
+                index: state.arg.index + 1,
+                values,
+                query: "",
+                active: 0,
+                error: undefined,
+            });
+        }
+        case "argError":
+            return withArg(state, { error: action.message });
+        case "provided": {
+            const target = state.stack[action.depth];
+            if (!target)
+                return state;
+            // A search that starts keeps the previous rows on screen until the new ones land.
+            const previous = target.providers[action.providerId];
+            const result = action.result.state === "loading" && previous
+                ? { ...action.result, rows: previous.rows }
+                : action.result;
+            const updated = {
+                ...target,
+                providers: { ...target.providers, [action.providerId]: result },
+            };
+            return { ...state, stack: state.stack.map((f, i) => (i === action.depth ? updated : f)) };
+        }
+    }
+}

package/dist/components/palette/types.d.ts

@@ -0,0 +1,102 @@
+/**
+ * @file src/components/palette/types.ts
+ * @desc The command palette's data: a Command (leaf with `run`, or nested with `page`, with
+ *       optional `args` collected first), a Page (static commands and async providers), a
+ *       Provider (search as you type), an ArgSpec (one prompt), the PaletteContext a command
+ *       runs with, and CommandPalette's props. Plain types, server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import type { ReactNode } from "react";
+/** One row of a "choice" argument. */
+export type ArgChoice = {
+    value: string;
+    label: string;
+    subtitle?: string | undefined;
+};
+/** One prompt collected before a command runs. */
+export type ArgSpec = {
+    name: string;
+    /** The input's placeholder while collecting it. */
+    label: string;
+    type: "text" | "number" | "choice";
+    /** For "choice": the rows to pick from, fuzzy-filtered by the input. */
+    choices?: readonly ArgChoice[] | undefined;
+    /** Returns a message to block Enter. */
+    validate?: ((value: string) => string | undefined) | undefined;
+};
+/** Rows searched as the query changes. `search` must honor the signal. */
+export type Provider = {
+    id: string;
+    /** Group heading for its rows. Default: the page title. */
+    group?: string | undefined;
+    /** Characters before the first search. Default 2. */
+    minLength?: number | undefined;
+    /** Debounce in ms. Default 200. */
+    debounceMs?: number | undefined;
+    search: (query: string, signal: AbortSignal) => Promise<readonly Command[]>;
+};
+/** A list the palette can show: static rows, async rows, or both. */
+export type Page = {
+    title: string;
+    /** Input placeholder. Default "Search…". */
+    placeholder?: string | undefined;
+    commands?: readonly Command[] | undefined;
+    providers?: readonly Provider[] | undefined;
+};
+/** What a command runs with. */
+export type PaletteContext = {
+    /** `router.push`. */
+    navigate: (href: string) => void;
+    close: () => void;
+    /** Push a page; opens the palette first when it's closed. */
+    push: (page: Page) => void;
+    /** Writes to the clipboard and announces "Copied" (or the failure). */
+    copy: (text: string) => Promise<void>;
+    /** `usePathname()`, "" outside the router. */
+    pathname: string;
+    /** Every root command, after `when`. */
+    commands: readonly Command[];
+};
+/** One row. Exactly one of `run` and `page` is set. */
+export type Command = {
+    /** Unique in the app. Recents are stored by it. */
+    id: string;
+    title: string;
+    subtitle?: string | undefined;
+    icon?: ReactNode;
+    /** Matched at a lower weight than the title. */
+    keywords?: readonly string[] | undefined;
+    /** Heading the row sits under. Default "Commands". */
+    group?: string | undefined;
+    /** "mod+shift+c", "?" or a chord "g p". Shown as kbd and active while the palette is mounted. */
+    shortcut?: string | undefined;
+    /** Hidden when false. Read on every render of the list. */
+    when?: ((ctx: PaletteContext) => boolean) | undefined;
+    run?: ((ctx: PaletteContext, args: Record<string, string>) => void | Promise<void>) | undefined;
+    page?: Page | undefined;
+    args?: readonly ArgSpec[] | undefined;
+    /** Close after `run`. Default true. */
+    closeOnRun?: boolean | undefined;
+};
+/** CommandPalette's props. */
+export type CommandPaletteProps = {
+    commands: readonly Command[];
+    /** Searched at the root once the query reaches each one's minLength. */
+    providers?: readonly Provider[] | undefined;
+    /** Namespaces recents in localStorage. Default "default". */
+    storageKey?: string | undefined;
+    /** Default "mod+k". */
+    hotkey?: string | undefined;
+    /** Root placeholder. Default "Search commands…". */
+    placeholder?: string | undefined;
+    /** The dialog's accessible name. Default "Command palette". */
+    label?: string | undefined;
+    /** Default true. */
+    calculator?: boolean | undefined;
+    /** Default true. */
+    recents?: boolean | undefined;
+    /** Classes for the panel. */
+    className?: string | undefined;
+};

package/dist/components/palette/types.js

@@ -0,0 +1,11 @@
+/**
+ * @file src/components/palette/types.ts
+ * @desc The command palette's data: a Command (leaf with `run`, or nested with `page`, with
+ *       optional `args` collected first), a Page (static commands and async providers), a
+ *       Provider (search as you type), an ArgSpec (one prompt), the PaletteContext a command
+ *       runs with, and CommandPalette's props. Plain types, server-safe.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+export {};

package/dist/components/palette/useProviderSearch.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file src/components/palette/useProviderSearch.ts
+ * @desc Runs a frame's providers as the query changes: each one waits for its minLength,
+ *       debounces, and gets an AbortSignal that fires when a newer query starts, the frame goes
+ *       away, or the palette closes. A superseded search's result is dropped even if it
+ *       resolves. Results go to the store by frame depth and provider id.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+import type { PaletteAction } from "./store.js";
+import type { Provider } from "./types.js";
+/** What the hook needs. */
+export type ProviderSearchArgs = {
+    providers: readonly Provider[];
+    query: string;
+    /** The frame's index in the stack, so results land on it even after a push. */
+    depth: number;
+    dispatch: (action: PaletteAction) => void;
+    /** False while the palette is closed, or the frame isn't on top. */
+    enabled: boolean;
+};
+/**
+ * @function useProviderSearch
+ * @param args {ProviderSearchArgs} providers, the query, the frame depth, dispatch and enabled
+ * @returns {void}
+ */
+export declare function useProviderSearch({ providers, query, depth, dispatch, enabled, }: ProviderSearchArgs): void;

package/dist/components/palette/useProviderSearch.js

@@ -0,0 +1,68 @@
+/**
+ * @file src/components/palette/useProviderSearch.ts
+ * @desc Runs a frame's providers as the query changes: each one waits for its minLength,
+ *       debounces, and gets an AbortSignal that fires when a newer query starts, the frame goes
+ *       away, or the palette closes. A superseded search's result is dropped even if it
+ *       resolves. Results go to the store by frame depth and provider id.
+ * @author David @dvhsh (https://dvh.sh)
+ * @created Sat Oct 3, 2026
+ * @modified Sat Oct 3, 2026
+ */
+"use client";
+import { useEffect } from "react";
+const DEFAULT_DEBOUNCE = 200;
+const DEFAULT_MIN = 2;
+/**
+ * @function useProviderSearch
+ * @param args {ProviderSearchArgs} providers, the query, the frame depth, dispatch and enabled
+ * @returns {void}
+ */
+export function useProviderSearch({ providers, query, depth, dispatch, enabled, }) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const trimmed = query.trim();
+        const controllers = [];
+        const timers = [];
+        for (const provider of providers) {
+            if (trimmed.length < (provider.minLength ?? DEFAULT_MIN))
+                continue;
+            const controller = new AbortController();
+            controllers.push(controller);
+            dispatch({
+                type: "provided",
+                depth,
+                providerId: provider.id,
+                result: { state: "loading", rows: [] },
+            });
+            timers.push(setTimeout(() => {
+                provider.search(trimmed, controller.signal).then((rows) => {
+                    if (controller.signal.aborted)
+                        return;
+                    dispatch({
+                        type: "provided",
+                        depth,
+                        providerId: provider.id,
+                        result: { state: "done", rows },
+                    });
+                }, (error) => {
+                    if (controller.signal.aborted)
+                        return;
+                    console.error(`CommandPalette: provider "${provider.id}" failed`, error);
+                    dispatch({
+                        type: "provided",
+                        depth,
+                        providerId: provider.id,
+                        result: { state: "error", rows: [] },
+                    });
+                });
+            }, provider.debounceMs ?? DEFAULT_DEBOUNCE));
+        }
+        return () => {
+            for (const timer of timers)
+                clearTimeout(timer);
+            for (const controller of controllers)
+                controller.abort();
+        };
+    }, [providers, query, depth, dispatch, enabled]);
+}

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

@@ -6,7 +6,7 @@
  *       a click on a link, or focus leaving it closes it too.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 import { type ComponentProps, type ReactNode } from "react";
 /** One link in the panel. */

package/dist/components/shell/HeaderMenu.js

@@ -6,7 +6,7 @@
  *       a click on a link, or focus leaving it closes it too.
  * @author David @dvhsh (https://dvh.sh)
  * @created Mon Sep 28, 2026
- * @modified Mon Sep 28, 2026
+ * @modified Sat Oct 3, 2026
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,5 +54,5 @@ export function HeaderMenu({ label, items = [], children, align = "end", buttonL
             box?.removeEventListener("focusout", onFocusOut);
         };
     }, [open]);
-    return (_jsxs("div", { ref: wrapper, className: cx("relative", className), ...props, children: [_jsx("button", { ref: button, type: "button", "aria-expanded": open, "aria-controls": panelId, "aria-label": buttonLabel, onClick: () => setOpen(!open), className: cx("flex items-center gap-2 font-bold text-c1 text-sm transition-colors hover:text-h1", buttonClassName), children: label }), _jsxs("div", { id: panelId, hidden: !open, className: cx("absolute z-10 mt-2 w-44 flex-col gap-1 rounded-lg border border-b3 bg-b6 p-2", open && "flex", align === "end" ? "right-0" : "left-0"), children: [items.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1", children: items.map((item) => (_jsx("li", { children: _jsx(AutoLink, { href: item.href, className: ITEM, onClick: () => setOpen(false), children: item.label }) }, item.href))) })) : null, children] })] }));
+    return (_jsxs("div", { ref: wrapper, className: cx("relative", className), ...props, children: [_jsx("button", { ref: button, type: "button", "aria-expanded": open, "aria-controls": panelId, "aria-label": buttonLabel, onClick: () => setOpen(!open), className: cx("flex min-h-6 items-center gap-2 font-bold text-c1 text-sm transition-colors hover:text-h1", buttonClassName), children: label }), _jsxs("div", { id: panelId, hidden: !open, className: cx("absolute z-10 mt-2 w-44 flex-col gap-1 rounded-lg border border-b3 bg-b6 p-2", open && "flex", align === "end" ? "right-0" : "left-0"), children: [items.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1", children: items.map((item) => (_jsx("li", { children: _jsx(AutoLink, { href: item.href, className: ITEM, onClick: () => setOpen(false), children: item.label }) }, item.href))) })) : 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/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";

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;