@pantoken/react-markdown 0.1.0

package/README.md

@@ -0,0 +1,87 @@
+# @pantoken/react-markdown
+
+Render Markdown with [Instructure UI](https://instructure.design) components and pantoken icons —
+a [react-markdown](https://github.com/remarkjs/react-markdown) integration. It maps Markdown
+elements onto InstUI (`Heading`, `Text`, `Link`, `List`, `Table`, `Alert`, …) and adds three
+pantoken-powered inline features:
+
+- **`:icon:` tokens** — resolved through `@pantoken/rehype` + `@pantoken/icons`, with optional
+  brand icons via `@pantoken/plugin-simple-icons`.
+- **Color swatches** — standalone color values (`#03893D`, `rgb(...)`) render as a swatch plus code.
+- **GitHub alerts** — `> [!NOTE]` blockquotes become InstUI `Alert`s.
+
+## Install
+
+```sh
+npm i @pantoken/react-markdown
+```
+
+`react`, `react-markdown`, `remark-gfm`, and the Instructure UI packages it maps to are peers, so
+bring your own. `@mdx-js/react` is an optional peer, needed only for the `/mdx` entry.
+
+Also available as `pantoken/react-markdown`.
+
+## Usage
+
+```mdx
+import { InstuiMarkdown } from "@pantoken/react-markdown";
+
+<InstuiMarkdown>
+  # Title
+
+Go :arrow-left: back. Brand is #03893D.
+
+> [!TIP]
+> Helpful.
+
+</InstuiMarkdown>;
+```
+
+With brand icons:
+
+```mdx
+import { InstuiMarkdown } from "@pantoken/react-markdown";
+import { simpleIcons } from "@pantoken/plugin-simple-icons";
+import * as registry from "simple-icons";
+
+<InstuiMarkdown renderOptions={{ icons: { plugins: [simpleIcons({ registry })] } }}>
+  Star us on :github:
+</InstuiMarkdown>
+;
+```
+
+For MDX content, wrap it with the provider from the `/mdx` entry (needs the `@mdx-js/react` peer):
+
+```tsx
+import { InstuiMdxProvider } from "@pantoken/react-markdown/mdx";
+```
+
+`renderOptions` tunes `link` (external affordance, permalinks), `code` (language hint), `icons`
+(enable, color, resolvers, plugins), `color` (swatches), `alerts` (GitHub alerts), and
+`tableCaption`. See `InstuiMarkdownRenderOptions`.
+
+## API
+
+- **`InstuiMarkdown(props)`** — the component; renders a Markdown string with InstUI mappings and
+  pantoken icon and color tokens.
+- **`createInstuiMarkdownComponents(options?): Components`** — build the react-markdown component
+  map for a set of render options.
+- **`instuiMarkdownComponents`** — the default component map (no options).
+- **`buildIconResolver(options?): IconResolver`** — assemble the icon-resolver chain (plugin
+  resolvers, explicit resolvers, then the built-in set).
+- **`rehypeColorCodes()` / `rehypeGithubAlerts()`** — the rehype plugins that tag color values and
+  GitHub-alert blockquotes.
+- **`parseAlertMarker(text)`** — detect a `[!NOTE]`-style marker; **`isColorValue(value)`** — test
+  whether a string is a standalone CSS color.
+- **`AlertMarker`, `InstuiMarkdownProps`, `InstuiMarkdownRenderOptions`** — public types.
+- **`./mdx`** — an MDX provider (`InstuiMdxProvider`) that supplies the InstUI component map to MDX
+  content. Kept separate so `@mdx-js/react` stays optional.
+
+## Related
+
+- Built on `@pantoken/rehype` and `@pantoken/icons` for the inline `:icon:` pipeline.
+- Add brand icons with `@pantoken/plugin-simple-icons`.
+
+## License
+
+MIT

package/dist/components-DWmL2y3Q.mjs

@@ -0,0 +1,373 @@
+import { Alert } from "@instructure/ui-alerts";
+import { Heading } from "@instructure/ui-heading";
+import { Img } from "@instructure/ui-img";
+import { Link } from "@instructure/ui-link";
+import { List } from "@instructure/ui-list";
+import { Table } from "@instructure/ui-table";
+import { Text } from "@instructure/ui-text";
+import { View } from "@instructure/ui-view";
+import { createElement } from "react";
+import { resolve } from "@pantoken/icons";
+import { visit } from "unist-util-visit";
+import { jsx } from "react/jsx-runtime";
+//#region src/helpers.ts
+/**
+* Pure, framework-free helpers: the icon-resolver chain, the color-code rehype plugin, alert-marker
+* parsing, and value sniffing. Kept separate from the React layer so the logic is unit-testable.
+*
+* @module
+*/
+/**
+* Build the icon-resolver chain: plugin `rehype` resolvers first, then explicit `resolvers`, then
+* the built-in `@pantoken/icons` set. The first match wins.
+*
+* @example
+* ```ts
+* import { buildIconResolver } from "@pantoken/react-markdown";
+*
+* const resolve = buildIconResolver();
+* resolve("arrow-left"); // an IconEntry from the built-in set, or undefined
+* ```
+*/
+function buildIconResolver(options) {
+	const resolvers = [];
+	for (const plugin of options?.icons?.plugins ?? []) {
+		const contributed = plugin.rehype?.({ resolve });
+		if (contributed?.resolve) resolvers.push(contributed.resolve);
+	}
+	for (const resolver of options?.icons?.resolvers ?? []) resolvers.push(resolver);
+	resolvers.push(resolve);
+	return (code) => {
+		for (const resolver of resolvers) {
+			const hit = resolver(code);
+			if (hit) return hit;
+		}
+	};
+}
+const ALERT_RE = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/;
+/**
+* Detect a GitHub alert marker at the start of text; returns the marker and the remaining text.
+*
+* @example
+* ```ts
+* import { parseAlertMarker } from "@pantoken/react-markdown";
+*
+* parseAlertMarker("[!TIP] Helpful"); // { marker: "TIP", rest: "Helpful" }
+* parseAlertMarker("Plain text"); // undefined
+* ```
+*/
+function parseAlertMarker(text) {
+	const match = ALERT_RE.exec(text);
+	if (!match) return void 0;
+	return {
+		marker: match[1],
+		rest: text.slice(match[0].length)
+	};
+}
+const COLOR_RE = /^(#[0-9a-f]{3,8}|(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch)\([^)]*\))$/i;
+/**
+* True when a string is a standalone CSS color value (hex or a color function).
+*
+* @example
+* ```ts
+* import { isColorValue } from "@pantoken/react-markdown";
+*
+* isColorValue("#03893D"); // true
+* isColorValue("oklch(0.7 0.1 200)"); // true
+* isColorValue("hello"); // false
+* ```
+*/
+function isColorValue(value) {
+	return COLOR_RE.test(value.trim());
+}
+const INLINE_COLOR_RE = /(#[0-9a-f]{3,8}\b|(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch)\([^)]*\))/gi;
+/**
+* A rehype plugin that wraps standalone color values in `<span data-color-code="…">`, so the React
+* layer can render a swatch. Mirrors the icon-token pipeline.
+*
+* @example
+* ```tsx
+* import Markdown from "react-markdown";
+* import { rehypeColorCodes } from "@pantoken/react-markdown";
+*
+* <Markdown rehypePlugins={[rehypeColorCodes]}>Brand is #03893D.</Markdown>;
+* ```
+*/
+function rehypeColorCodes() {
+	return (tree) => {
+		visit(tree, "text", (node, index, parent) => {
+			if (index === void 0 || !parent) return;
+			const text = node.value;
+			INLINE_COLOR_RE.lastIndex = 0;
+			if (!INLINE_COLOR_RE.test(text)) return;
+			INLINE_COLOR_RE.lastIndex = 0;
+			const out = [];
+			let last = 0;
+			let match;
+			while (match = INLINE_COLOR_RE.exec(text)) {
+				if (match.index > last) out.push({
+					type: "text",
+					value: text.slice(last, match.index)
+				});
+				out.push({
+					type: "element",
+					tagName: "span",
+					properties: { "data-color-code": match[1] },
+					children: [{
+						type: "text",
+						value: match[1]
+					}]
+				});
+				last = match.index + match[0].length;
+			}
+			if (last < text.length) out.push({
+				type: "text",
+				value: text.slice(last)
+			});
+			parent.children.splice(index, 1, ...out);
+			return index + out.length;
+		});
+	};
+}
+function findFirstText(node) {
+	if (!node || typeof node !== "object") return void 0;
+	const n = node;
+	if (n.type === "text") return node;
+	for (const child of n.children ?? []) {
+		const found = findFirstText(child);
+		if (found) return found;
+	}
+}
+/**
+* A rehype plugin that tags GitHub-alert blockquotes: it detects a `[!NOTE]`-style marker at the
+* start of a blockquote, records it as `data-alert="note"`, and strips the marker text. The React
+* `blockquote` component then renders an InstUI `Alert`.
+*
+* @example
+* ```tsx
+* import Markdown from "react-markdown";
+* import { rehypeGithubAlerts } from "@pantoken/react-markdown";
+*
+* <Markdown rehypePlugins={[rehypeGithubAlerts]}>{"> [!NOTE]\n> Heads up."}</Markdown>;
+* ```
+*/
+function rehypeGithubAlerts() {
+	return (tree) => {
+		visit(tree, "element", (node) => {
+			if (node.tagName !== "blockquote") return;
+			const first = findFirstText(node);
+			if (!first) return;
+			const parsed = parseAlertMarker(first.value.replace(/^\s+/, ""));
+			if (!parsed) return;
+			node.properties = {
+				...node.properties,
+				"data-alert": parsed.marker.toLowerCase()
+			};
+			first.value = parsed.rest;
+		});
+	};
+}
+/** Map an alert marker to an InstUI `Alert` variant. */
+function alertVariant(marker) {
+	switch (marker) {
+		case "TIP": return "success";
+		case "WARNING": return "warning";
+		case "CAUTION": return "error";
+		default: return "info";
+	}
+}
+//#endregion
+//#region src/components.tsx
+/**
+* Maps Markdown (hast) elements onto Instructure UI components, plus the inline `:icon:` and
+* color-swatch renderers. Returned as a react-markdown `components` map.
+*
+* @module
+*/
+const TableHead = Table.Head;
+const TableBody = Table.Body;
+const TableRow = Table.Row;
+const TableColHeader = Table.ColHeader;
+const TableCell = Table.Cell;
+function str(value) {
+	return typeof value === "string" ? value : void 0;
+}
+/** Best-effort extraction of a plain-text string from arbitrary React children. */
+function textOf(children) {
+	if (typeof children === "string") return children;
+	if (Array.isArray(children)) return children.map(textOf).join("");
+	return "";
+}
+function slug(value) {
+	return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "col";
+}
+function iconSpan(resolve, color) {
+	return function IconOrColorSpan(props) {
+		const iconName = str(props["data-pantoken-icon"]);
+		if (iconName) {
+			const icon = resolve(iconName);
+			const svg = icon?.svg ?? (icon?.path ? `<svg viewBox="0 0 24 24"><path d="${icon.path}" fill="currentColor"/></svg>` : void 0);
+			if (svg) return createElement("span", {
+				role: "img",
+				"aria-label": iconName,
+				className: "pantoken-icon",
+				style: {
+					display: "inline-flex",
+					width: "1em",
+					height: "1em",
+					verticalAlign: "-0.125em",
+					color
+				},
+				dangerouslySetInnerHTML: { __html: svg }
+			});
+		}
+		const colorCode = str(props["data-color-code"]);
+		if (colorCode) return createElement("span", {
+			className: "pantoken-color",
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: "0.35em"
+			}
+		}, createElement("span", {
+			"aria-hidden": true,
+			style: {
+				display: "inline-block",
+				width: "0.85em",
+				height: "0.85em",
+				borderRadius: "2px",
+				border: "1px solid rgba(0,0,0,0.2)",
+				background: colorCode
+			}
+		}), createElement("code", null, colorCode));
+		return createElement("span", null, props.children);
+	};
+}
+function heading(level) {
+	return ({ children }) => /* @__PURE__ */ jsx(Heading, {
+		level,
+		children
+	});
+}
+/**
+* Build the react-markdown component map for a set of render options.
+*
+* @param options - {@link InstuiMarkdownRenderOptions}.
+* @returns A react-markdown `components` map backed by Instructure UI.
+*
+* @example Pass the map straight to react-markdown
+* ```tsx
+* import Markdown from "react-markdown";
+* import { createInstuiMarkdownComponents } from "@pantoken/react-markdown";
+*
+* const components = createInstuiMarkdownComponents({ tableCaption: "Grades" });
+* <Markdown components={components}># Report</Markdown>;
+* ```
+*/
+function createInstuiMarkdownComponents(options = {}) {
+	const Span = iconSpan(buildIconResolver(options), options.icons?.color);
+	const showExternal = options.link?.external ?? true;
+	const showLanguage = options.code?.language ?? true;
+	const caption = options.tableCaption ?? "Table";
+	return {
+		h1: heading("h1"),
+		h2: heading("h2"),
+		h3: heading("h3"),
+		h4: heading("h4"),
+		h5: heading("h5"),
+		h6: heading("h6"),
+		p: ({ children }) => /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			children
+		}),
+		strong: ({ children }) => /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			weight: "bold",
+			children
+		}),
+		em: ({ children }) => /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			fontStyle: "italic",
+			children
+		}),
+		a: ({ children, ...props }) => {
+			const href = str(props.href);
+			return /* @__PURE__ */ jsx(Link, {
+				href,
+				...showExternal && !!href && /^https?:\/\//.test(href) ? { target: "_blank" } : {},
+				children
+			});
+		},
+		ul: ({ children }) => /* @__PURE__ */ jsx(List, {
+			as: "ul",
+			children
+		}),
+		ol: ({ children }) => /* @__PURE__ */ jsx(List, {
+			as: "ol",
+			isUnstyled: false,
+			children
+		}),
+		li: ({ children }) => /* @__PURE__ */ jsx(List.Item, { children }),
+		blockquote: ({ children, ...props }) => {
+			const alert = str(props["data-alert"]);
+			if (options.alerts?.enabled !== false && alert) return /* @__PURE__ */ jsx(Alert, {
+				variant: alertVariant(alert.toUpperCase()),
+				margin: "small 0",
+				children
+			});
+			return /* @__PURE__ */ jsx(View, {
+				as: "blockquote",
+				display: "block",
+				borderWidth: "none none none large",
+				padding: "small medium",
+				children
+			});
+		},
+		code: ({ children, ...props }) => {
+			const className = str(props.className);
+			if (!className && !textOf(children).includes("\n")) return /* @__PURE__ */ jsx(Text, {
+				as: "code",
+				children
+			});
+			return createElement("code", {
+				className,
+				"data-language": showLanguage ? className?.replace(/.*language-/, "") : void 0
+			}, children);
+		},
+		pre: ({ children }) => /* @__PURE__ */ jsx(View, {
+			as: "pre",
+			display: "block",
+			background: "secondary",
+			padding: "small",
+			borderRadius: "medium",
+			children
+		}),
+		img: ({ ...props }) => /* @__PURE__ */ jsx(Img, {
+			src: str(props.src) ?? "",
+			alt: str(props.alt) ?? ""
+		}),
+		hr: () => /* @__PURE__ */ jsx(View, {
+			as: "hr",
+			display: "block",
+			margin: "medium 0"
+		}),
+		table: ({ children }) => /* @__PURE__ */ jsx(Table, {
+			caption,
+			layout: "auto",
+			children
+		}),
+		thead: ({ children }) => /* @__PURE__ */ jsx(TableHead, { children }),
+		tbody: ({ children }) => /* @__PURE__ */ jsx(TableBody, { children }),
+		tr: ({ children }) => /* @__PURE__ */ jsx(TableRow, { children }),
+		th: ({ children }) => /* @__PURE__ */ jsx(TableColHeader, {
+			id: slug(textOf(children)),
+			children
+		}),
+		td: ({ children }) => /* @__PURE__ */ jsx(TableCell, { children }),
+		span: Span
+	};
+}
+/** The default component map (no options). */
+const instuiMarkdownComponents = createInstuiMarkdownComponents();
+//#endregion
+export { parseAlertMarker as a, isColorValue as i, instuiMarkdownComponents as n, rehypeColorCodes as o, buildIconResolver as r, rehypeGithubAlerts as s, createInstuiMarkdownComponents as t };

package/dist/index.d.mts

@@ -0,0 +1,124 @@
+import { n as InstuiMarkdownProps, r as InstuiMarkdownRenderOptions, t as AlertMarker } from "./types-CpY9ftGp.mjs";
+import { Components } from "react-markdown";
+import { IconResolver } from "@pantoken/model";
+
+//#region src/instui-markdown.d.ts
+/**
+ * Render Markdown with Instructure UI element mappings and pantoken icon/color tokens.
+ *
+ * @param props - {@link InstuiMarkdownProps}.
+ *
+ * @example Basic
+ * ```tsx
+ * import { InstuiMarkdown } from "@pantoken/react-markdown";
+ *
+ * <InstuiMarkdown>{"Go :arrow-left: back. Brand is #03893D.\n\n> [!TIP]\n> Helpful."}</InstuiMarkdown>;
+ * ```
+ *
+ * @example With brand icons via a plugin
+ * ```tsx
+ * import { InstuiMarkdown } from "@pantoken/react-markdown";
+ * import { simpleIcons } from "@pantoken/plugin-simple-icons";
+ * import * as registry from "simple-icons";
+ *
+ * <InstuiMarkdown renderOptions={{ icons: { plugins: [simpleIcons({ registry })] } }}>
+ *   {"Star us on :github:"}
+ * </InstuiMarkdown>;
+ * ```
+ */
+declare function InstuiMarkdown({
+  children,
+  renderOptions
+}: InstuiMarkdownProps): React.ReactNode;
+//#endregion
+//#region src/components.d.ts
+/**
+ * Build the react-markdown component map for a set of render options.
+ *
+ * @param options - {@link InstuiMarkdownRenderOptions}.
+ * @returns A react-markdown `components` map backed by Instructure UI.
+ *
+ * @example Pass the map straight to react-markdown
+ * ```tsx
+ * import Markdown from "react-markdown";
+ * import { createInstuiMarkdownComponents } from "@pantoken/react-markdown";
+ *
+ * const components = createInstuiMarkdownComponents({ tableCaption: "Grades" });
+ * <Markdown components={components}># Report</Markdown>;
+ * ```
+ */
+declare function createInstuiMarkdownComponents(options?: InstuiMarkdownRenderOptions): Components;
+/** The default component map (no options). */
+declare const instuiMarkdownComponents: Components;
+//#endregion
+//#region src/helpers.d.ts
+/**
+ * Build the icon-resolver chain: plugin `rehype` resolvers first, then explicit `resolvers`, then
+ * the built-in `@pantoken/icons` set. The first match wins.
+ *
+ * @example
+ * ```ts
+ * import { buildIconResolver } from "@pantoken/react-markdown";
+ *
+ * const resolve = buildIconResolver();
+ * resolve("arrow-left"); // an IconEntry from the built-in set, or undefined
+ * ```
+ */
+declare function buildIconResolver(options?: InstuiMarkdownRenderOptions): IconResolver;
+/**
+ * Detect a GitHub alert marker at the start of text; returns the marker and the remaining text.
+ *
+ * @example
+ * ```ts
+ * import { parseAlertMarker } from "@pantoken/react-markdown";
+ *
+ * parseAlertMarker("[!TIP] Helpful"); // { marker: "TIP", rest: "Helpful" }
+ * parseAlertMarker("Plain text"); // undefined
+ * ```
+ */
+declare function parseAlertMarker(text: string): {
+  marker: AlertMarker;
+  rest: string;
+} | undefined;
+/**
+ * True when a string is a standalone CSS color value (hex or a color function).
+ *
+ * @example
+ * ```ts
+ * import { isColorValue } from "@pantoken/react-markdown";
+ *
+ * isColorValue("#03893D"); // true
+ * isColorValue("oklch(0.7 0.1 200)"); // true
+ * isColorValue("hello"); // false
+ * ```
+ */
+declare function isColorValue(value: string): boolean;
+/**
+ * A rehype plugin that wraps standalone color values in `<span data-color-code="…">`, so the React
+ * layer can render a swatch. Mirrors the icon-token pipeline.
+ *
+ * @example
+ * ```tsx
+ * import Markdown from "react-markdown";
+ * import { rehypeColorCodes } from "@pantoken/react-markdown";
+ *
+ * <Markdown rehypePlugins={[rehypeColorCodes]}>Brand is #03893D.</Markdown>;
+ * ```
+ */
+declare function rehypeColorCodes(): (tree: unknown) => void;
+/**
+ * A rehype plugin that tags GitHub-alert blockquotes: it detects a `[!NOTE]`-style marker at the
+ * start of a blockquote, records it as `data-alert="note"`, and strips the marker text. The React
+ * `blockquote` component then renders an InstUI `Alert`.
+ *
+ * @example
+ * ```tsx
+ * import Markdown from "react-markdown";
+ * import { rehypeGithubAlerts } from "@pantoken/react-markdown";
+ *
+ * <Markdown rehypePlugins={[rehypeGithubAlerts]}>{"> [!NOTE]\n> Heads up."}</Markdown>;
+ * ```
+ */
+declare function rehypeGithubAlerts(): (tree: unknown) => void;
+//#endregion
+export { type AlertMarker, InstuiMarkdown, type InstuiMarkdownProps, type InstuiMarkdownRenderOptions, buildIconResolver, createInstuiMarkdownComponents, instuiMarkdownComponents, isColorValue, parseAlertMarker, rehypeColorCodes, rehypeGithubAlerts };

package/dist/index.mjs

@@ -0,0 +1,59 @@
+import { a as parseAlertMarker, i as isColorValue, n as instuiMarkdownComponents, o as rehypeColorCodes, r as buildIconResolver, s as rehypeGithubAlerts, t as createInstuiMarkdownComponents } from "./components-DWmL2y3Q.mjs";
+import { rehypePantokenIcons } from "@pantoken/rehype";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx } from "react/jsx-runtime";
+//#region src/instui-markdown.tsx
+/**
+* The `InstuiMarkdown` React component: renders a Markdown string with Instructure UI components
+* and pantoken icons. It wires react-markdown with GFM, the GitHub-alert and color-code rehype
+* steps, and `@pantoken/rehype` for inline `:icon:` tokens.
+*
+* @module
+*/
+/**
+* Render Markdown with Instructure UI element mappings and pantoken icon/color tokens.
+*
+* @param props - {@link InstuiMarkdownProps}.
+*
+* @example Basic
+* ```tsx
+* import { InstuiMarkdown } from "@pantoken/react-markdown";
+*
+* <InstuiMarkdown>{"Go :arrow-left: back. Brand is #03893D.\n\n> [!TIP]\n> Helpful."}</InstuiMarkdown>;
+* ```
+*
+* @example With brand icons via a plugin
+* ```tsx
+* import { InstuiMarkdown } from "@pantoken/react-markdown";
+* import { simpleIcons } from "@pantoken/plugin-simple-icons";
+* import * as registry from "simple-icons";
+*
+* <InstuiMarkdown renderOptions={{ icons: { plugins: [simpleIcons({ registry })] } }}>
+*   {"Star us on :github:"}
+* </InstuiMarkdown>;
+* ```
+*/
+function InstuiMarkdown({ children, renderOptions }) {
+	const components = createInstuiMarkdownComponents(renderOptions);
+	const iconsEnabled = renderOptions?.icons?.enabled !== false;
+	const colorEnabled = renderOptions?.color?.enabled !== false;
+	const alertsEnabled = renderOptions?.alerts?.enabled !== false;
+	const resolve = buildIconResolver(renderOptions);
+	const rehypePlugins = [
+		...alertsEnabled ? [rehypeGithubAlerts] : [],
+		...iconsEnabled ? [[rehypePantokenIcons, {
+			resolve,
+			plugins: renderOptions?.icons?.plugins
+		}]] : [],
+		...colorEnabled ? [rehypeColorCodes] : []
+	];
+	return /* @__PURE__ */ jsx(Markdown, {
+		remarkPlugins: [remarkGfm],
+		rehypePlugins,
+		components,
+		children
+	});
+}
+//#endregion
+export { InstuiMarkdown, buildIconResolver, createInstuiMarkdownComponents, instuiMarkdownComponents, isColorValue, parseAlertMarker, rehypeColorCodes, rehypeGithubAlerts };

package/dist/mdx.d.mts

@@ -0,0 +1,30 @@
+import { r as InstuiMarkdownRenderOptions } from "./types-CpY9ftGp.mjs";
+import { ReactNode } from "react";
+
+//#region src/mdx.d.ts
+/** Props for {@link InstuiMdxProvider}. */
+interface InstuiMdxProviderProps {
+  children: ReactNode;
+  renderOptions?: InstuiMarkdownRenderOptions;
+}
+/**
+ * Provide the Instructure UI component map to MDX content.
+ *
+ * @param props - {@link InstuiMdxProviderProps}.
+ *
+ * @example
+ * ```tsx
+ * import { InstuiMdxProvider } from "@pantoken/react-markdown/mdx";
+ * import Content from "./doc.mdx";
+ *
+ * <InstuiMdxProvider>
+ *   <Content />
+ * </InstuiMdxProvider>;
+ * ```
+ */
+declare function InstuiMdxProvider({
+  children,
+  renderOptions
+}: InstuiMdxProviderProps): ReactNode;
+//#endregion
+export { InstuiMdxProvider, InstuiMdxProvider as default, InstuiMdxProviderProps };

package/dist/mdx.mjs

@@ -0,0 +1,33 @@
+import { t as createInstuiMarkdownComponents } from "./components-DWmL2y3Q.mjs";
+import { jsx } from "react/jsx-runtime";
+import { MDXProvider } from "@mdx-js/react";
+//#region src/mdx.tsx
+/**
+* `@pantoken/react-markdown/mdx` — an MDX provider that supplies the Instructure UI component map
+* to MDX content. Kept in a separate entry so `@mdx-js/react` stays an optional peer.
+*
+* @module
+*/
+/**
+* Provide the Instructure UI component map to MDX content.
+*
+* @param props - {@link InstuiMdxProviderProps}.
+*
+* @example
+* ```tsx
+* import { InstuiMdxProvider } from "@pantoken/react-markdown/mdx";
+* import Content from "./doc.mdx";
+*
+* <InstuiMdxProvider>
+*   <Content />
+* </InstuiMdxProvider>;
+* ```
+*/
+function InstuiMdxProvider({ children, renderOptions }) {
+	return /* @__PURE__ */ jsx(MDXProvider, {
+		components: createInstuiMarkdownComponents(renderOptions),
+		children
+	});
+}
+//#endregion
+export { InstuiMdxProvider, InstuiMdxProvider as default };

package/dist/types-CpY9ftGp.d.mts

@@ -0,0 +1,44 @@
+import { IconResolver, PantokenPlugin } from "@pantoken/model";
+
+//#region src/types.d.ts
+/** GitHub-style blockquote alert markers (`> [!NOTE]`). */
+type AlertMarker = "NOTE" | "TIP" | "IMPORTANT" | "WARNING" | "CAUTION";
+/** Render options that tune how Markdown maps onto Instructure UI. */
+interface InstuiMarkdownRenderOptions {
+  /** Link behavior. */
+  link?: {
+    /** Show an external-link affordance on off-site links (default: true). */external?: boolean; /** Add permalink anchors to headings (default: false). */
+    permalinks?: boolean; /** Class name for permalink anchors (default: `pantoken-heading-anchor`). */
+    permalinkClassName?: string;
+  };
+  /** Fenced code block behavior. */
+  code?: {
+    /** Preserve the language hint as a `data-language` attribute (default: true). */language?: boolean;
+  };
+  /** Inline `:icon:` token behavior. */
+  icons?: {
+    /** Enable `:icon:` rendering (default: true). */enabled?: boolean; /** CSS color applied to rendered icons. */
+    color?: string; /** Extra resolvers, tried before the built-in pantoken icon set. */
+    resolvers?: IconResolver[]; /** Plugins whose `rehype` hooks contribute resolvers (e.g. simple-icons). */
+    plugins?: PantokenPlugin[];
+  };
+  /** Inline color-code swatches (e.g. `#03893D`). */
+  color?: {
+    /** Enable color swatches (default: true). */enabled?: boolean;
+  };
+  /** GitHub-style blockquote alerts. */
+  alerts?: {
+    /** Enable `> [!NOTE]` → InstUI Alert mapping (default: true). */enabled?: boolean;
+  };
+  /** Caption used for rendered tables (required by InstUI Table for a11y). */
+  tableCaption?: string;
+}
+/** Props for the {@link InstuiMarkdown} component. */
+interface InstuiMarkdownProps {
+  /** The Markdown source. */
+  children: string;
+  /** Render options. */
+  renderOptions?: InstuiMarkdownRenderOptions;
+}
+//#endregion
+export { InstuiMarkdownProps as n, InstuiMarkdownRenderOptions as r, AlertMarker as t };

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@pantoken/react-markdown",
+  "version": "0.1.0",
+  "description": "react-markdown integration for pantoken: render Markdown with Instructure UI components and pantoken icons.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./mdx": "./dist/mdx.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "unist-util-visit": "^5.1.0",
+    "@pantoken/icons": "0.1.0",
+    "@pantoken/model": "0.1.0",
+    "@pantoken/rehype": "0.1.0"
+  },
+  "devDependencies": {
+    "@instructure/ui-alerts": "^11.7.3",
+    "@instructure/ui-heading": "^11.7.3",
+    "@instructure/ui-img": "^11.7.3",
+    "@instructure/ui-link": "^11.7.3",
+    "@instructure/ui-list": "^11.7.3",
+    "@instructure/ui-table": "^11.7.3",
+    "@instructure/ui-text": "^11.7.3",
+    "@instructure/ui-view": "^11.7.3",
+    "@mdx-js/react": "^3.1.1",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "core-js": "^3.49.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "simple-icons": "^15.22.0",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4",
+    "@pantoken/plugin-simple-icons": "0.1.0"
+  },
+  "peerDependencies": {
+    "@instructure/ui-alerts": "*",
+    "@instructure/ui-heading": "*",
+    "@instructure/ui-img": "*",
+    "@instructure/ui-link": "*",
+    "@instructure/ui-list": "*",
+    "@instructure/ui-table": "*",
+    "@instructure/ui-text": "*",
+    "@instructure/ui-view": "*",
+    "@mdx-js/react": "*",
+    "core-js": ">=3",
+    "react": ">=18",
+    "react-markdown": ">=9",
+    "remark-gfm": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "@mdx-js/react": {
+      "optional": true
+    }
+  },
+  "pantoken": {
+    "key": "react-markdown",
+    "kind": "subpath"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}