@object-ui/plugin-markdown 6.2.3 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @object-ui/plugin-markdown
 
+## 7.1.0
+
+### Patch Changes
+
+- Updated dependencies [677f7ed]
+- Updated dependencies [08c47da]
+- Updated dependencies [a71be60]
+- Updated dependencies [cb03bc3]
+  - @object-ui/types@7.1.0
+  - @object-ui/core@7.1.0
+  - @object-ui/react@7.1.0
+  - @object-ui/components@7.1.0
+
+## 7.0.0
+
+### Minor Changes
+
+- c09f44e: Docs: mermaid diagrams + long-doc table of contents (ADR-0046).
+
+  - **plugin-markdown** renders ```mermaid fenced blocks as diagrams (`<Mermaid>`: lazy-loaded mermaid, `securityLevel: 'strict'`, rendered post-`rehype-sanitize`by a trusted component, degrades to the raw source on error). Mermaid is text → SVG, so it stays within the v1 image/binary ban. Adds`extractToc(markdown)`— a TOC builder whose slugs are generated with the same`github-slugger` `rehype-slug`uses, so`#id` links resolve to the rendered heading anchors.
+  - **console** `DocPage` shows a sticky right-rail table of contents (h2–h3) for docs with ≥3 headings, plus an app-independent `/apps/:packageId/docs` index already added earlier.
+  - **i18n** adds `help.onThisPage` (en/zh; other locales fall back).
+
+- 1addfda: Markdown grammar v1.1 (ADR-0046): heading anchors, code highlighting, and GitHub-style alerts.
+
+  The shared markdown renderer now applies three enrichments, all behind the existing `rehype-sanitize` gate (which runs last and stays the final XSS boundary):
+
+  - **Heading anchors** (`rehype-slug` + `rehype-autolink-headings`) — headings get slug ids so intra-doc `#section` links resolve (fixes the ADR-0046 cross-reference anchors, which previously had no target). `clobberPrefix: ''` keeps ids verbatim.
+  - **Code highlighting** (`rehype-highlight`) — fenced code blocks get highlight.js token classes; colors are theme-aware (light/dark) via injected CSS using the console's shadcn variables.
+  - **GitHub-style alerts** (`remark-github-blockquote-alert`) — `> [!NOTE]` / `[!TIP]` / `[!IMPORTANT]` / `[!WARNING]` / `[!CAUTION]` render as styled callouts. The syntax is valid CommonMark, so it also renders natively in GitHub previews and degrades to a plain blockquote in any older renderer — no lint coordination needed.
+
+  Security posture is unchanged: class names and ids are inert; script/style/event-handler/`javascript:`/iframe vectors stay blocked, and the alert icon SVG is stripped (zero SVG surface in the sanitize schema — callout icons are CSS pseudo-elements). A `class → className` canonicalization step runs before sanitize so the alert plugin's raw `class` attribute survives the whitelist.
+
+### Patch Changes
+
+- Updated dependencies [5976ba3]
+- Updated dependencies [a00e16d]
+- Updated dependencies [eaccefd]
+- Updated dependencies [f7f325d]
+- Updated dependencies [c12986e]
+- Updated dependencies [71d7ce0]
+- Updated dependencies [053c948]
+- Updated dependencies [ddbe4a2]
+- Updated dependencies [2d47e94]
+- Updated dependencies [9049bbe]
+- Updated dependencies [6c0c92c]
+- Updated dependencies [cb2fdb1]
+- Updated dependencies [c3749eb]
+- Updated dependencies [6cfa330]
+- Updated dependencies [ad8ade6]
+- Updated dependencies [d54346c]
+- Updated dependencies [3870c20]
+- Updated dependencies [2eb3096]
+- Updated dependencies [b88c560]
+- Updated dependencies [d16566f]
+- Updated dependencies [90acb7f]
+- Updated dependencies [7913390]
+- Updated dependencies [1394e34]
+- Updated dependencies [e95cc25]
+- Updated dependencies [abe8ebc]
+- Updated dependencies [300d755]
+- Updated dependencies [bd8b054]
+- Updated dependencies [4eb9cb6]
+- Updated dependencies [7c239fd]
+- Updated dependencies [858ad94]
+- Updated dependencies [2270239]
+- Updated dependencies [8d1195d]
+  - @object-ui/core@7.0.0
+  - @object-ui/components@7.0.0
+  - @object-ui/react@7.0.0
+  - @object-ui/types@7.0.0
+
 ## 6.2.3
 
 ### Patch Changes

package/dist/{packages/plugin-markdown/src/MarkdownImpl.d.ts → MarkdownImpl.d.ts}

@@ -5,11 +5,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import * as React from "react";
 /**
  * Props for the Markdown component implementation.
  *
- * This component renders markdown content using react-markdown with GitHub Flavored Markdown support.
- * All content is sanitized to prevent XSS attacks.
+ * This component renders markdown content using react-markdown with GitHub
+ * Flavored Markdown support. All content is sanitized to prevent XSS attacks.
  */
 export interface MarkdownImplProps {
     /**
@@ -21,9 +22,10 @@ export interface MarkdownImplProps {
      */
     className?: string;
 }
+export declare function parseMetadataFence(src: string): Record<string, string>;
 /**
  * Internal Markdown implementation component.
  * This contains the actual react-markdown import (heavy ~100-200 KB).
  */
-export default function MarkdownImpl({ content, className }: MarkdownImplProps): import("react/jsx-runtime").JSX.Element;
+export default function MarkdownImpl({ content, className }: MarkdownImplProps): React.JSX.Element;
 //# sourceMappingURL=MarkdownImpl.d.ts.map

package/dist/MarkdownImpl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownImpl.d.ts","sourceRoot":"","sources":["../src/MarkdownImpl.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2FD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBtE;AA8CD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,iBAAiB,qBAwC7E"}

package/dist/Mermaid.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from "react";
+export declare function Mermaid({ chart }: {
+    chart: string;
+}): React.JSX.Element;
+//# sourceMappingURL=Mermaid.d.ts.map

package/dist/Mermaid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mermaid.d.ts","sourceRoot":"","sources":["../src/Mermaid.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA8B9B,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBAuEnD"}

package/dist/index.d.ts

@@ -1,2 +1,21 @@
-export * from './packages/plugin-markdown/src/index'
-export {}
+import { default as React } from 'react';
+export type { MarkdownSchema } from './types';
+export { extractToc, type TocItem } from './toc';
+export { Mermaid } from './Mermaid';
+export interface MarkdownRendererProps {
+    schema: {
+        type: string;
+        id?: string;
+        className?: string;
+        content?: string;
+    };
+}
+/**
+ * MarkdownRenderer - The public API for the markdown component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export declare const MarkdownRenderer: React.FC<MarkdownRendererProps>;
+export declare const markdownComponents: {
+    markdown: React.FC<MarkdownRendererProps>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAMpC,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAS5D,CAAC;AA2BF,eAAO,MAAM,kBAAkB;;CAE9B,CAAC"}

package/dist/index.js

@@ -1,26 +1,166 @@
-import e, { Suspense as t } from "react";
-import { ComponentRegistry as n } from "@object-ui/core";
-import { Skeleton as r } from "@object-ui/components";
-import { jsx as i } from "react/jsx-runtime";
-import a from "react-markdown";
-import o from "remark-gfm";
-import s from "rehype-sanitize";
+import * as e from "react";
+import t, { Suspense as n } from "react";
+import { ComponentRegistry as r } from "@object-ui/core";
+import { Skeleton as i } from "@object-ui/components";
+import { jsx as a } from "react/jsx-runtime";
+import o from "github-slugger";
+import s from "react-markdown";
+import c from "remark-gfm";
+import { remarkAlert as l } from "remark-github-blockquote-alert";
+import u, { defaultSchema as d } from "rehype-sanitize";
+import f from "rehype-slug";
+import p from "rehype-highlight";
+import m from "rehype-autolink-headings";
 //#region \0rolldown/runtime.js
-var c = Object.defineProperty, l = (e, t) => () => (e && (t = e(e = 0)), t), u = /* @__PURE__ */ ((e, t) => {
+var h = Object.defineProperty, g = (e, t) => () => (e && (t = e(e = 0)), t), _ = (e, t) => {
 	let n = {};
-	for (var r in e) c(n, r, {
+	for (var r in e) h(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || c(n, Symbol.toStringTag, { value: "Module" }), n;
-})({ default: () => d });
-function d({ content: e, className: t }) {
-	return /* @__PURE__ */ i("div", {
+	return t || h(n, Symbol.toStringTag, { value: "Module" }), n;
+};
+//#endregion
+//#region src/toc.ts
+function v(e) {
+	return e.replace(/!\[[^\]]*\]\([^)]*\)/g, "").replace(/\[([^\]]+)\]\([^)]*\)/g, "$1").replace(/`([^`]+)`/g, "$1").replace(/(\*\*|__)(.*?)\1/g, "$2").replace(/(\*|_)(.*?)\1/g, "$2").replace(/<[^>]+>/g, "").trim();
+}
+function y(e, t) {
+	let n = t?.minDepth ?? 2, r = t?.maxDepth ?? 3, i = new o(), a = [], s = null;
+	for (let t of (e ?? "").split(/\r?\n/)) {
+		let e = t.match(/^\s{0,3}(`{3,}|~{3,})/);
+		if (e) {
+			let t = e[1][0];
+			s === null ? s = t : t === s && (s = null);
+			continue;
+		}
+		if (s !== null) continue;
+		let o = t.match(/^(#{1,6})\s+(.+?)\s*#*\s*$/);
+		if (!o) continue;
+		let c = o[1].length, l = v(o[2]);
+		if (!l) continue;
+		let u = i.slug(l);
+		c >= n && c <= r && a.push({
+			depth: c,
+			text: l,
+			id: u
+		});
+	}
+	return a;
+}
+//#endregion
+//#region src/Mermaid.tsx
+function b() {
+	return C ||= import("mermaid").then((e) => e.default), C;
+}
+function x() {
+	return typeof document < "u" && document.documentElement.classList.contains("dark");
+}
+function S({ chart: t }) {
+	let [n, r] = e.useState(""), [i, o] = e.useState(null), [s, c] = e.useState(x);
+	return e.useEffect(() => {
+		if (typeof document > "u") return;
+		let e = document.documentElement, t = new MutationObserver(() => c(x()));
+		return t.observe(e, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		}), () => t.disconnect();
+	}, []), e.useEffect(() => {
+		let e = !1, n = t.trim();
+		if (!n) {
+			r(""), o(null);
+			return;
+		}
+		return b().then(async (t) => {
+			t.initialize({
+				startOnLoad: !1,
+				securityLevel: "strict",
+				theme: s ? "dark" : "default"
+			});
+			let i = `os-mermaid-${w += 1}`, { svg: a } = await t.render(i, n);
+			e || (r(a), o(null));
+		}).catch((t) => {
+			e || o(t instanceof Error ? t.message : String(t));
+		}), () => {
+			e = !0;
+		};
+	}, [t, s]), i ? /* @__PURE__ */ a("pre", {
+		"data-mermaid": !0,
+		"data-mermaid-error": !0,
+		className: "my-4 overflow-auto rounded border border-destructive/40 bg-muted p-3 text-xs",
+		children: /* @__PURE__ */ a("code", { children: t })
+	}) : n ? /* @__PURE__ */ a("div", {
+		"data-mermaid": !0,
+		role: "img",
+		className: "my-4 flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:max-w-full",
+		dangerouslySetInnerHTML: { __html: n }
+	}) : /* @__PURE__ */ a("div", {
+		"data-mermaid": !0,
+		"data-mermaid-pending": !0,
+		className: "my-4 text-sm text-muted-foreground",
+		children: /* @__PURE__ */ a("pre", {
+			className: "sr-only",
+			children: t
+		})
+	});
+}
+var C, w, T = g((() => {
+	C = null, w = 0;
+}));
+//#endregion
+//#region src/markdown-theme.ts
+function E() {
+	if (typeof document > "u" || document.getElementById(D)) return;
+	let e = document.createElement("style");
+	e.id = D, e.textContent = O, document.head.appendChild(e);
+}
+var D, O, k = g((() => {
+	D = "os-markdown-styles", O = "\n.os-markdown .md-anchor {\n  margin-left: 0.4ch;\n  color: var(--muted-foreground);\n  text-decoration: none;\n  opacity: 0;\n  transition: opacity 0.12s ease-in-out;\n}\n.os-markdown :is(h1,h2,h3,h4,h5,h6):hover .md-anchor { opacity: 0.6; }\n.os-markdown .md-anchor:hover { opacity: 1; }\n\n/* highlight.js tokens — light */\n.os-markdown .hljs-comment,\n.os-markdown .hljs-quote { color: var(--muted-foreground); font-style: italic; }\n.os-markdown .hljs-keyword,\n.os-markdown .hljs-selector-tag,\n.os-markdown .hljs-literal,\n.os-markdown .hljs-doctag { color: #8250df; }\n.os-markdown .hljs-string,\n.os-markdown .hljs-regexp,\n.os-markdown .hljs-addition { color: #0a7d33; }\n.os-markdown .hljs-number,\n.os-markdown .hljs-symbol,\n.os-markdown .hljs-bullet { color: #0550ae; }\n.os-markdown .hljs-title,\n.os-markdown .hljs-section,\n.os-markdown .hljs-name,\n.os-markdown .hljs-built_in { color: #6639ba; }\n.os-markdown .hljs-attr,\n.os-markdown .hljs-attribute,\n.os-markdown .hljs-variable,\n.os-markdown .hljs-template-variable { color: #953800; }\n.os-markdown .hljs-type,\n.os-markdown .hljs-class .hljs-title { color: #0550ae; }\n.os-markdown .hljs-meta { color: var(--muted-foreground); }\n.os-markdown .hljs-deletion { color: #b35900; }\n.os-markdown .hljs-emphasis { font-style: italic; }\n.os-markdown .hljs-strong { font-weight: 600; }\n\n/* highlight.js tokens — dark */\n.dark .os-markdown .hljs-keyword,\n.dark .os-markdown .hljs-selector-tag,\n.dark .os-markdown .hljs-literal,\n.dark .os-markdown .hljs-doctag { color: #d2a8ff; }\n.dark .os-markdown .hljs-string,\n.dark .os-markdown .hljs-regexp,\n.dark .os-markdown .hljs-addition { color: #7ee787; }\n.dark .os-markdown .hljs-number,\n.dark .os-markdown .hljs-symbol,\n.dark .os-markdown .hljs-bullet { color: #79c0ff; }\n.dark .os-markdown .hljs-title,\n.dark .os-markdown .hljs-section,\n.dark .os-markdown .hljs-name,\n.dark .os-markdown .hljs-built_in { color: #d2a8ff; }\n.dark .os-markdown .hljs-attr,\n.dark .os-markdown .hljs-attribute,\n.dark .os-markdown .hljs-variable,\n.dark .os-markdown .hljs-template-variable { color: #ffa657; }\n.dark .os-markdown .hljs-type,\n.dark .os-markdown .hljs-class .hljs-title { color: #79c0ff; }\n.dark .os-markdown .hljs-deletion { color: #ffa198; }\n\n/* GitHub-style alert callouts (icon = CSS pseudo-element, no SVG) */\n.os-markdown .markdown-alert {\n  margin: 1em 0;\n  padding: 0.6em 1em;\n  border-left: 0.25em solid var(--border);\n  border-radius: 0.375rem;\n  background: color-mix(in srgb, var(--muted) 40%, transparent);\n}\n.os-markdown .markdown-alert > :first-child { margin-top: 0; }\n.os-markdown .markdown-alert > :last-child { margin-bottom: 0; }\n.os-markdown .markdown-alert-title {\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: capitalize;\n}\n.os-markdown .markdown-alert-title::before {\n  margin-right: 0.5ch;\n  font-weight: 700;\n}\n.os-markdown .markdown-alert-note { border-left-color: #0969da; }\n.os-markdown .markdown-alert-note .markdown-alert-title { color: #0969da; }\n.os-markdown .markdown-alert-note .markdown-alert-title::before { content: \"ⓘ\"; }\n.os-markdown .markdown-alert-tip { border-left-color: #1a7f37; }\n.os-markdown .markdown-alert-tip .markdown-alert-title { color: #1a7f37; }\n.os-markdown .markdown-alert-tip .markdown-alert-title::before { content: \"💡\"; }\n.os-markdown .markdown-alert-important { border-left-color: #8250df; }\n.os-markdown .markdown-alert-important .markdown-alert-title { color: #8250df; }\n.os-markdown .markdown-alert-important .markdown-alert-title::before { content: \"❖\"; }\n.os-markdown .markdown-alert-warning { border-left-color: #9a6700; }\n.os-markdown .markdown-alert-warning .markdown-alert-title { color: #9a6700; }\n.os-markdown .markdown-alert-warning .markdown-alert-title::before { content: \"⚠\"; }\n.os-markdown .markdown-alert-caution { border-left-color: var(--destructive); }\n.os-markdown .markdown-alert-caution .markdown-alert-title { color: var(--destructive); }\n.os-markdown .markdown-alert-caution .markdown-alert-title::before { content: \"⛔\"; }\n.dark .os-markdown .markdown-alert-note { border-left-color: #4493f8; }\n.dark .os-markdown .markdown-alert-note .markdown-alert-title { color: #4493f8; }\n.dark .os-markdown .markdown-alert-tip { border-left-color: #3fb950; }\n.dark .os-markdown .markdown-alert-tip .markdown-alert-title { color: #3fb950; }\n.dark .os-markdown .markdown-alert-important { border-left-color: #ab7df8; }\n.dark .os-markdown .markdown-alert-important .markdown-alert-title { color: #ab7df8; }\n.dark .os-markdown .markdown-alert-warning { border-left-color: #d29922; }\n.dark .os-markdown .markdown-alert-warning .markdown-alert-title { color: #d29922; }\n\n/* Bordered tables: @tailwindcss/typography zeroes padding on each row's\n   first (inline-start) and last (inline-end) cell because it assumes\n   borderless tables. We add cell borders (prose-th/td:border), so restore\n   symmetric horizontal padding — otherwise the first column's text sits\n   flush against the left border, misaligned with every other column. The\n   0.6666667em matches prose-sm's inner-cell padding. The .os-markdown\n   class selector outranks typography's zero-specificity :where() rules. */\n.os-markdown table th:first-child,\n.os-markdown table td:first-child { padding-inline-start: 0.6666667em; }\n.os-markdown table th:last-child,\n.os-markdown table td:last-child { padding-inline-end: 0.6666667em; }\n";
+})), A = /* @__PURE__ */ _({
+	default: () => F,
+	parseMetadataFence: () => N
+});
+function j() {
+	let e = (e) => typeof e == "string" ? e.split(/\s+/).filter(Boolean) : Array.isArray(e) ? e : [], t = (n) => {
+		if (!n || typeof n != "object") return;
+		let r = n.properties;
+		if (r && (typeof r.class == "string" || typeof r.className == "string") && (r.className = [...e(r.className), ...e(r.class)], delete r.class), Array.isArray(n.children)) for (let e of n.children) t(e);
+	};
+	return (e) => t(e);
+}
+function M(t) {
+	return typeof t == "string" ? t : typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(M).join("") : e.isValidElement(t) ? M(t.props.children) : "";
+}
+function N(e) {
+	let t = {};
+	for (let n of e.split("\n")) {
+		let e = n.trim();
+		if (!e || e.startsWith("#")) continue;
+		let r = e.indexOf(":");
+		if (r < 1) continue;
+		let i = e.slice(0, r).trim(), a = e.slice(r + 1).trim();
+		(a.startsWith("\"") && a.endsWith("\"") || a.startsWith("'") && a.endsWith("'")) && (a = a.slice(1, -1)), i && (t[i] = a);
+	}
+	return t;
+}
+function P({ source: t }) {
+	let n = e.useMemo(() => N(t), [t]), i = r.get("element:metadata_viewer");
+	return i ? /* @__PURE__ */ a("div", {
+		className: "not-prose my-4",
+		children: /* @__PURE__ */ a(i, { schema: {
+			type: "element:metadata_viewer",
+			properties: n
+		} })
+	}) : /* @__PURE__ */ a("pre", { children: /* @__PURE__ */ a("code", { children: t }) });
+}
+function F({ content: e, className: t }) {
+	return E(), /* @__PURE__ */ a("div", {
 		"data-slot": "markdown",
-		className: ((...e) => e.filter(Boolean).join(" "))("prose prose-sm dark:prose-invert max-w-none", "prose-headings:font-semibold prose-headings:tracking-tight", "prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl", "prose-p:leading-relaxed prose-p:text-foreground", "prose-a:text-primary prose-a:no-underline hover:prose-a:underline", "prose-code:text-foreground prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none", "prose-pre:bg-muted prose-pre:text-foreground prose-pre:border", "prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground", "prose-strong:text-foreground prose-strong:font-semibold", "prose-ul:list-disc prose-ol:list-decimal", "prose-li:text-foreground prose-li:marker:text-muted-foreground", "prose-table:border prose-th:border prose-th:bg-muted prose-td:border", "prose-img:rounded-md prose-img:border", t),
-		children: /* @__PURE__ */ i(a, {
-			remarkPlugins: [o],
-			rehypePlugins: [s],
+		className: ((...e) => e.filter(Boolean).join(" "))("prose prose-sm dark:prose-invert max-w-none", "prose-headings:font-semibold prose-headings:tracking-tight", "prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl", "prose-p:leading-relaxed prose-p:text-foreground", "prose-a:text-primary prose-a:no-underline hover:prose-a:underline", "prose-code:text-foreground prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none", "prose-pre:bg-muted prose-pre:text-foreground prose-pre:border", "prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground", "prose-strong:text-foreground prose-strong:font-semibold", "prose-ul:list-disc prose-ol:list-decimal", "prose-li:text-foreground prose-li:marker:text-muted-foreground", "prose-table:border prose-th:border prose-th:bg-muted prose-td:border", "prose-img:rounded-md prose-img:border", "os-markdown", t),
+		children: /* @__PURE__ */ a(s, {
+			remarkPlugins: R,
+			rehypePlugins: z,
+			components: B,
 			disallowedElements: [
 				"script",
 				"style",
@@ -33,14 +173,64 @@ function d({ content: e, className: t }) {
 		})
 	});
 }
-var f = l((() => {})), p = e.lazy(() => Promise.resolve().then(() => (f(), u))), m = ({ schema: e }) => /* @__PURE__ */ i(t, {
-	fallback: /* @__PURE__ */ i(r, { className: "w-full h-[200px]" }),
-	children: /* @__PURE__ */ i(p, {
+var I, L, R, z, B, V = g((() => {
+	k(), T(), I = (e) => (e ?? []).filter((e) => !(Array.isArray(e) && e[0] === "className")), L = {
+		...d,
+		clobberPrefix: "",
+		tagNames: [
+			...d.tagNames ?? [],
+			"span",
+			"div"
+		],
+		attributes: {
+			...d.attributes,
+			"*": [...d.attributes?.["*"] ?? [], "className"],
+			a: [
+				...I(d.attributes?.a),
+				"ariaHidden",
+				"tabIndex"
+			]
+		}
+	}, R = [c, l], z = [
+		f,
+		j,
+		[p, {
+			detect: !0,
+			ignoreMissing: !0,
+			plainText: ["mermaid", "metadata"]
+		}],
+		[m, {
+			behavior: "append",
+			properties: {
+				className: ["md-anchor"],
+				ariaHidden: !0,
+				tabIndex: -1
+			},
+			content: {
+				type: "text",
+				value: "#"
+			}
+		}],
+		[u, L]
+	], B = { pre({ node: t, children: n, ...r }) {
+		let i = e.Children.toArray(n)[0], o = e.isValidElement(i) && typeof i.props.className == "string" ? i.props.className : "";
+		return /\blanguage-mermaid\b/.test(o) ? /* @__PURE__ */ a(S, { chart: M(i.props.children) }) : /\blanguage-metadata\b/.test(o) ? /* @__PURE__ */ a(P, { source: M(i.props.children) }) : /* @__PURE__ */ a("pre", {
+			...r,
+			children: n
+		});
+	} };
+}));
+//#endregion
+//#region src/index.tsx
+T();
+var H = t.lazy(() => Promise.resolve().then(() => (V(), A))), U = ({ schema: e }) => /* @__PURE__ */ a(n, {
+	fallback: /* @__PURE__ */ a(i, { className: "w-full h-[200px]" }),
+	children: /* @__PURE__ */ a(H, {
 		content: e.content || "",
 		className: e.className
 	})
 });
-n.register("markdown", m, {
+r.register("markdown", U, {
 	namespace: "plugin-markdown",
 	label: "Markdown",
 	category: "plugin",
@@ -57,6 +247,6 @@ n.register("markdown", m, {
 	}],
 	defaultProps: { content: "# Hello World\n\nThis is a **markdown** component with *formatting* support.\n\n- Item 1\n- Item 2\n- Item 3" }
 });
-var h = { markdown: m };
+var W = { markdown: U };
 //#endregion
-export { m as MarkdownRenderer, h as markdownComponents };
+export { U as MarkdownRenderer, S as Mermaid, y as extractToc, W as markdownComponents };

package/dist/index.umd.cjs

@@ -1,7 +1,126 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/core"),require("@object-ui/components"),require("react/jsx-runtime"),require("react-markdown"),require("remark-gfm"),require("rehype-sanitize")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/core`,`@object-ui/components`,`react/jsx-runtime`,`react-markdown`,`remark-gfm`,`rehype-sanitize`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginMarkdown={},e.React,e.ObjectUICore,e.ObjectUIComponents,e.react_jsx_runtime,e.react_markdown,e.remark_gfm,e.rehype_sanitize))})(this,function(e,t,n,r,i,a,o,s){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var c=Object.create,l=Object.defineProperty,u=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t)=>()=>(e&&(t=e(e=0)),t),h=(e,t)=>{let n={};for(var r in e)l(n,r,{get:e[r],enumerable:!0});return t||l(n,Symbol.toStringTag,{value:`Module`}),n},g=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=d(t),a=0,o=i.length,s;a<o;a++)s=i[a],!p.call(e,s)&&s!==n&&l(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=u(t,s))||r.enumerable});return e},_=(e,t,n)=>(n=e==null?{}:c(f(e)),g(t||!e||!e.__esModule?l(n,`default`,{value:e,enumerable:!0}):n,e));t=_(t,1),a=_(a,1),o=_(o,1),s=_(s,1);var v=h({default:()=>y});function y({content:e,className:t}){return(0,i.jsx)(`div`,{"data-slot":`markdown`,className:((...e)=>e.filter(Boolean).join(` `))(`prose prose-sm dark:prose-invert max-w-none`,`prose-headings:font-semibold prose-headings:tracking-tight`,`prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl`,`prose-p:leading-relaxed prose-p:text-foreground`,`prose-a:text-primary prose-a:no-underline hover:prose-a:underline`,`prose-code:text-foreground prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none`,`prose-pre:bg-muted prose-pre:text-foreground prose-pre:border`,`prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground`,`prose-strong:text-foreground prose-strong:font-semibold`,`prose-ul:list-disc prose-ol:list-decimal`,`prose-li:text-foreground prose-li:marker:text-muted-foreground`,`prose-table:border prose-th:border prose-th:bg-muted prose-td:border`,`prose-img:rounded-md prose-img:border`,t),children:(0,i.jsx)(a.default,{remarkPlugins:[o.default],rehypePlugins:[s.default],disallowedElements:[`script`,`style`,`iframe`,`object`,`embed`],unwrapDisallowed:!0,children:e})})}var b=m((()=>{})),x=t.default.lazy(()=>Promise.resolve().then(()=>(b(),v))),S=({schema:e})=>(0,i.jsx)(t.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-[200px]`}),children:(0,i.jsx)(x,{content:e.content||``,className:e.className})});n.ComponentRegistry.register(`markdown`,S,{namespace:`plugin-markdown`,label:`Markdown`,category:`plugin`,inputs:[{name:`content`,type:`string`,label:`Markdown Content`,required:!0,inputType:`textarea`},{name:`className`,type:`string`,label:`CSS Class`}],defaultProps:{content:`# Hello World
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/core"),require("@object-ui/components"),require("react/jsx-runtime"),require("github-slugger"),require("react-markdown"),require("remark-gfm"),require("remark-github-blockquote-alert"),require("rehype-sanitize"),require("rehype-slug"),require("rehype-highlight"),require("rehype-autolink-headings")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/core`,`@object-ui/components`,`react/jsx-runtime`,`github-slugger`,`react-markdown`,`remark-gfm`,`remark-github-blockquote-alert`,`rehype-sanitize`,`rehype-slug`,`rehype-highlight`,`rehype-autolink-headings`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginMarkdown={},e.React,e.ObjectUICore,e.ObjectUIComponents,e.react_jsx_runtime,e.github_slugger,e.ReactMarkdown,e.remarkGfm,e.remarkGithubBlockquoteAlert,e.rehypeSanitize,e.rehypeSlug,e.rehypeHighlight,e.rehypeAutolinkHeadings))})(this,function(e,t,n,r,i,a,o,s,c,l,u,d,f){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var p=Object.create,m=Object.defineProperty,h=Object.getOwnPropertyDescriptor,g=Object.getOwnPropertyNames,_=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty,y=(e,t)=>()=>(e&&(t=e(e=0)),t),b=(e,t)=>{let n={};for(var r in e)m(n,r,{get:e[r],enumerable:!0});return t||m(n,Symbol.toStringTag,{value:`Module`}),n},x=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=g(t),a=0,o=i.length,s;a<o;a++)s=i[a],!v.call(e,s)&&s!==n&&m(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=h(t,s))||r.enumerable});return e},S=(e,t,n)=>(n=e==null?{}:p(_(e)),x(t||!e||!e.__esModule?m(n,`default`,{value:e,enumerable:!0}):n,e));t=S(t,1),a=S(a,1),o=S(o,1),s=S(s,1),l=S(l,1),u=S(u,1),d=S(d,1),f=S(f,1);function C(e){return e.replace(/!\[[^\]]*\]\([^)]*\)/g,``).replace(/\[([^\]]+)\]\([^)]*\)/g,`$1`).replace(/`([^`]+)`/g,`$1`).replace(/(\*\*|__)(.*?)\1/g,`$2`).replace(/(\*|_)(.*?)\1/g,`$2`).replace(/<[^>]+>/g,``).trim()}function w(e,t){let n=t?.minDepth??2,r=t?.maxDepth??3,i=new a.default,o=[],s=null;for(let t of(e??``).split(/\r?\n/)){let e=t.match(/^\s{0,3}(`{3,}|~{3,})/);if(e){let t=e[1][0];s===null?s=t:t===s&&(s=null);continue}if(s!==null)continue;let a=t.match(/^(#{1,6})\s+(.+?)\s*#*\s*$/);if(!a)continue;let c=a[1].length,l=C(a[2]);if(!l)continue;let u=i.slug(l);c>=n&&c<=r&&o.push({depth:c,text:l,id:u})}return o}function T(){return O||=import(`mermaid`).then(e=>e.default),O}function E(){return typeof document<`u`&&document.documentElement.classList.contains(`dark`)}function D({chart:e}){let[n,r]=t.useState(``),[a,o]=t.useState(null),[s,c]=t.useState(E);return t.useEffect(()=>{if(typeof document>`u`)return;let e=document.documentElement,t=new MutationObserver(()=>c(E()));return t.observe(e,{attributes:!0,attributeFilter:[`class`]}),()=>t.disconnect()},[]),t.useEffect(()=>{let t=!1,n=e.trim();if(!n){r(``),o(null);return}return T().then(async e=>{e.initialize({startOnLoad:!1,securityLevel:`strict`,theme:s?`dark`:`default`});let i=`os-mermaid-${k+=1}`,{svg:a}=await e.render(i,n);t||(r(a),o(null))}).catch(e=>{t||o(e instanceof Error?e.message:String(e))}),()=>{t=!0}},[e,s]),a?(0,i.jsx)(`pre`,{"data-mermaid":!0,"data-mermaid-error":!0,className:`my-4 overflow-auto rounded border border-destructive/40 bg-muted p-3 text-xs`,children:(0,i.jsx)(`code`,{children:e})}):n?(0,i.jsx)(`div`,{"data-mermaid":!0,role:`img`,className:`my-4 flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:max-w-full`,dangerouslySetInnerHTML:{__html:n}}):(0,i.jsx)(`div`,{"data-mermaid":!0,"data-mermaid-pending":!0,className:`my-4 text-sm text-muted-foreground`,children:(0,i.jsx)(`pre`,{className:`sr-only`,children:e})})}var O,k,A=y((()=>{O=null,k=0}));function j(){if(typeof document>`u`||document.getElementById(M))return;let e=document.createElement(`style`);e.id=M,e.textContent=N,document.head.appendChild(e)}var M,N,P=y((()=>{M=`os-markdown-styles`,N=`
+.os-markdown .md-anchor {
+  margin-left: 0.4ch;
+  color: var(--muted-foreground);
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity 0.12s ease-in-out;
+}
+.os-markdown :is(h1,h2,h3,h4,h5,h6):hover .md-anchor { opacity: 0.6; }
+.os-markdown .md-anchor:hover { opacity: 1; }
+
+/* highlight.js tokens — light */
+.os-markdown .hljs-comment,
+.os-markdown .hljs-quote { color: var(--muted-foreground); font-style: italic; }
+.os-markdown .hljs-keyword,
+.os-markdown .hljs-selector-tag,
+.os-markdown .hljs-literal,
+.os-markdown .hljs-doctag { color: #8250df; }
+.os-markdown .hljs-string,
+.os-markdown .hljs-regexp,
+.os-markdown .hljs-addition { color: #0a7d33; }
+.os-markdown .hljs-number,
+.os-markdown .hljs-symbol,
+.os-markdown .hljs-bullet { color: #0550ae; }
+.os-markdown .hljs-title,
+.os-markdown .hljs-section,
+.os-markdown .hljs-name,
+.os-markdown .hljs-built_in { color: #6639ba; }
+.os-markdown .hljs-attr,
+.os-markdown .hljs-attribute,
+.os-markdown .hljs-variable,
+.os-markdown .hljs-template-variable { color: #953800; }
+.os-markdown .hljs-type,
+.os-markdown .hljs-class .hljs-title { color: #0550ae; }
+.os-markdown .hljs-meta { color: var(--muted-foreground); }
+.os-markdown .hljs-deletion { color: #b35900; }
+.os-markdown .hljs-emphasis { font-style: italic; }
+.os-markdown .hljs-strong { font-weight: 600; }
+
+/* highlight.js tokens — dark */
+.dark .os-markdown .hljs-keyword,
+.dark .os-markdown .hljs-selector-tag,
+.dark .os-markdown .hljs-literal,
+.dark .os-markdown .hljs-doctag { color: #d2a8ff; }
+.dark .os-markdown .hljs-string,
+.dark .os-markdown .hljs-regexp,
+.dark .os-markdown .hljs-addition { color: #7ee787; }
+.dark .os-markdown .hljs-number,
+.dark .os-markdown .hljs-symbol,
+.dark .os-markdown .hljs-bullet { color: #79c0ff; }
+.dark .os-markdown .hljs-title,
+.dark .os-markdown .hljs-section,
+.dark .os-markdown .hljs-name,
+.dark .os-markdown .hljs-built_in { color: #d2a8ff; }
+.dark .os-markdown .hljs-attr,
+.dark .os-markdown .hljs-attribute,
+.dark .os-markdown .hljs-variable,
+.dark .os-markdown .hljs-template-variable { color: #ffa657; }
+.dark .os-markdown .hljs-type,
+.dark .os-markdown .hljs-class .hljs-title { color: #79c0ff; }
+.dark .os-markdown .hljs-deletion { color: #ffa198; }
+
+/* GitHub-style alert callouts (icon = CSS pseudo-element, no SVG) */
+.os-markdown .markdown-alert {
+  margin: 1em 0;
+  padding: 0.6em 1em;
+  border-left: 0.25em solid var(--border);
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--muted) 40%, transparent);
+}
+.os-markdown .markdown-alert > :first-child { margin-top: 0; }
+.os-markdown .markdown-alert > :last-child { margin-bottom: 0; }
+.os-markdown .markdown-alert-title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: capitalize;
+}
+.os-markdown .markdown-alert-title::before {
+  margin-right: 0.5ch;
+  font-weight: 700;
+}
+.os-markdown .markdown-alert-note { border-left-color: #0969da; }
+.os-markdown .markdown-alert-note .markdown-alert-title { color: #0969da; }
+.os-markdown .markdown-alert-note .markdown-alert-title::before { content: "ⓘ"; }
+.os-markdown .markdown-alert-tip { border-left-color: #1a7f37; }
+.os-markdown .markdown-alert-tip .markdown-alert-title { color: #1a7f37; }
+.os-markdown .markdown-alert-tip .markdown-alert-title::before { content: "💡"; }
+.os-markdown .markdown-alert-important { border-left-color: #8250df; }
+.os-markdown .markdown-alert-important .markdown-alert-title { color: #8250df; }
+.os-markdown .markdown-alert-important .markdown-alert-title::before { content: "❖"; }
+.os-markdown .markdown-alert-warning { border-left-color: #9a6700; }
+.os-markdown .markdown-alert-warning .markdown-alert-title { color: #9a6700; }
+.os-markdown .markdown-alert-warning .markdown-alert-title::before { content: "⚠"; }
+.os-markdown .markdown-alert-caution { border-left-color: var(--destructive); }
+.os-markdown .markdown-alert-caution .markdown-alert-title { color: var(--destructive); }
+.os-markdown .markdown-alert-caution .markdown-alert-title::before { content: "⛔"; }
+.dark .os-markdown .markdown-alert-note { border-left-color: #4493f8; }
+.dark .os-markdown .markdown-alert-note .markdown-alert-title { color: #4493f8; }
+.dark .os-markdown .markdown-alert-tip { border-left-color: #3fb950; }
+.dark .os-markdown .markdown-alert-tip .markdown-alert-title { color: #3fb950; }
+.dark .os-markdown .markdown-alert-important { border-left-color: #ab7df8; }
+.dark .os-markdown .markdown-alert-important .markdown-alert-title { color: #ab7df8; }
+.dark .os-markdown .markdown-alert-warning { border-left-color: #d29922; }
+.dark .os-markdown .markdown-alert-warning .markdown-alert-title { color: #d29922; }
+
+/* Bordered tables: @tailwindcss/typography zeroes padding on each row's
+   first (inline-start) and last (inline-end) cell because it assumes
+   borderless tables. We add cell borders (prose-th/td:border), so restore
+   symmetric horizontal padding — otherwise the first column's text sits
+   flush against the left border, misaligned with every other column. The
+   0.6666667em matches prose-sm's inner-cell padding. The .os-markdown
+   class selector outranks typography's zero-specificity :where() rules. */
+.os-markdown table th:first-child,
+.os-markdown table td:first-child { padding-inline-start: 0.6666667em; }
+.os-markdown table th:last-child,
+.os-markdown table td:last-child { padding-inline-end: 0.6666667em; }
+`})),F=b({default:()=>B,parseMetadataFence:()=>R});function I(){let e=e=>typeof e==`string`?e.split(/\s+/).filter(Boolean):Array.isArray(e)?e:[],t=n=>{if(!n||typeof n!=`object`)return;let r=n.properties;if(r&&(typeof r.class==`string`||typeof r.className==`string`)&&(r.className=[...e(r.className),...e(r.class)],delete r.class),Array.isArray(n.children))for(let e of n.children)t(e)};return e=>t(e)}function L(e){return typeof e==`string`?e:typeof e==`number`?String(e):Array.isArray(e)?e.map(L).join(``):t.isValidElement(e)?L(e.props.children):``}function R(e){let t={};for(let n of e.split(`
+`)){let e=n.trim();if(!e||e.startsWith(`#`))continue;let r=e.indexOf(`:`);if(r<1)continue;let i=e.slice(0,r).trim(),a=e.slice(r+1).trim();(a.startsWith(`"`)&&a.endsWith(`"`)||a.startsWith(`'`)&&a.endsWith(`'`))&&(a=a.slice(1,-1)),i&&(t[i]=a)}return t}function z({source:e}){let r=t.useMemo(()=>R(e),[e]),a=n.ComponentRegistry.get(`element:metadata_viewer`);return a?(0,i.jsx)(`div`,{className:`not-prose my-4`,children:(0,i.jsx)(a,{schema:{type:`element:metadata_viewer`,properties:r}})}):(0,i.jsx)(`pre`,{children:(0,i.jsx)(`code`,{children:e})})}function B({content:e,className:t}){return j(),(0,i.jsx)(`div`,{"data-slot":`markdown`,className:((...e)=>e.filter(Boolean).join(` `))(`prose prose-sm dark:prose-invert max-w-none`,`prose-headings:font-semibold prose-headings:tracking-tight`,`prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl`,`prose-p:leading-relaxed prose-p:text-foreground`,`prose-a:text-primary prose-a:no-underline hover:prose-a:underline`,`prose-code:text-foreground prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none`,`prose-pre:bg-muted prose-pre:text-foreground prose-pre:border`,`prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground`,`prose-strong:text-foreground prose-strong:font-semibold`,`prose-ul:list-disc prose-ol:list-decimal`,`prose-li:text-foreground prose-li:marker:text-muted-foreground`,`prose-table:border prose-th:border prose-th:bg-muted prose-td:border`,`prose-img:rounded-md prose-img:border`,`os-markdown`,t),children:(0,i.jsx)(o.default,{remarkPlugins:U,rehypePlugins:W,components:G,disallowedElements:[`script`,`style`,`iframe`,`object`,`embed`],unwrapDisallowed:!0,children:e})})}var V,H,U,W,G,K=y((()=>{P(),A(),V=e=>(e??[]).filter(e=>!(Array.isArray(e)&&e[0]===`className`)),H={...l.defaultSchema,clobberPrefix:``,tagNames:[...l.defaultSchema.tagNames??[],`span`,`div`],attributes:{...l.defaultSchema.attributes,"*":[...l.defaultSchema.attributes?.[`*`]??[],`className`],a:[...V(l.defaultSchema.attributes?.a),`ariaHidden`,`tabIndex`]}},U=[s.default,c.remarkAlert],W=[u.default,I,[d.default,{detect:!0,ignoreMissing:!0,plainText:[`mermaid`,`metadata`]}],[f.default,{behavior:`append`,properties:{className:[`md-anchor`],ariaHidden:!0,tabIndex:-1},content:{type:`text`,value:`#`}}],[l.default,H]],G={pre({node:e,children:n,...r}){let a=t.Children.toArray(n)[0],o=t.isValidElement(a)&&typeof a.props.className==`string`?a.props.className:``;return/\blanguage-mermaid\b/.test(o)?(0,i.jsx)(D,{chart:L(a.props.children)}):/\blanguage-metadata\b/.test(o)?(0,i.jsx)(z,{source:L(a.props.children)}):(0,i.jsx)(`pre`,{...r,children:n})}}}));A();var q=t.default.lazy(()=>Promise.resolve().then(()=>(K(),F))),J=({schema:e})=>(0,i.jsx)(t.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-[200px]`}),children:(0,i.jsx)(q,{content:e.content||``,className:e.className})});n.ComponentRegistry.register(`markdown`,J,{namespace:`plugin-markdown`,label:`Markdown`,category:`plugin`,inputs:[{name:`content`,type:`string`,label:`Markdown Content`,required:!0,inputType:`textarea`},{name:`className`,type:`string`,label:`CSS Class`}],defaultProps:{content:`# Hello World
 
 This is a **markdown** component with *formatting* support.
 
 - Item 1
 - Item 2
-- Item 3`}});var C={markdown:S};e.MarkdownRenderer=S,e.markdownComponents=C});
+- Item 3`}});var Y={markdown:J};e.MarkdownRenderer=J,e.Mermaid=D,e.extractToc=w,e.markdownComponents=Y});

package/dist/markdown-theme.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Inject the markdown enrichment styles once. No-op on the server (no
+ * `document`) and idempotent across many rendered markdown instances.
+ */
+export declare function ensureMarkdownStyles(): void;
+//# sourceMappingURL=markdown-theme.d.ts.map

package/dist/markdown-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-theme.d.ts","sourceRoot":"","sources":["../src/markdown-theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA0IH;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAO3C"}

package/dist/toc.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export interface TocItem {
+    /** Heading level (1–6). */
+    depth: number;
+    /** Visible heading text, inline markdown stripped. */
+    text: string;
+    /** Slug id, identical to what `rehype-slug` puts on the rendered heading. */
+    id: string;
+}
+/**
+ * Build a table of contents from Markdown source.
+ *
+ * Slugs are generated with the SAME `github-slugger` that `rehype-slug` uses,
+ * walking every heading in document order so duplicate-heading `-1/-2` suffixes
+ * line up — that is what makes a `#id` TOC link resolve to the rendered
+ * heading's anchor. Headings inside fenced code blocks are ignored. Only
+ * `minDepth..maxDepth` (default h2–h3) are returned, but all headings still
+ * advance the slugger so ids stay in sync.
+ */
+export declare function extractToc(markdown: string, opts?: {
+    minDepth?: number;
+    maxDepth?: number;
+}): TocItem[];
+//# sourceMappingURL=toc.d.ts.map

package/dist/toc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../src/toc.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,MAAM,WAAW,OAAO;IACtB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,EAAE,EAAE,MAAM,CAAA;CACX;AAcD;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CACxB,QAAQ,EAAE,MAAM,EAChB,IAAI,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9C,OAAO,EAAE,CA0BX"}

package/dist/{packages/plugin-markdown/src/types.d.ts → types.d.ts}

@@ -1,4 +1,4 @@
-import { BaseSchema } from '../../types/src';
+import { BaseSchema } from '@object-ui/types';
 /**
  * Markdown component schema.
  * Renders markdown content with GitHub Flavored Markdown support.

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,IAAI,EAAE,UAAU,CAAC;IAEjB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-markdown",
-  "version": "6.2.3",
+  "version": "7.1.0",
   "type": "module",
   "license": "MIT",
   "description": "Markdown rendering plugin for Object UI, powered by react-markdown",
@@ -24,25 +24,31 @@
     }
   },
   "dependencies": {
+    "github-slugger": "^2.0.0",
+    "mermaid": "^11.15.0",
     "react-markdown": "^10.1.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-highlight": "^7.0.2",
     "rehype-sanitize": "^6.0.0",
+    "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "@object-ui/components": "6.2.3",
-    "@object-ui/core": "6.2.3",
-    "@object-ui/react": "6.2.3",
-    "@object-ui/types": "6.2.3"
+    "remark-github-blockquote-alert": "^2.1.0",
+    "@object-ui/components": "7.1.0",
+    "@object-ui/core": "7.1.0",
+    "@object-ui/react": "7.1.0",
+    "@object-ui/types": "7.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.15",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
     "typescript": "^6.0.3",
-    "vite": "^8.0.14",
-    "vite-plugin-dts": "^5.0.1"
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
   },
   "keywords": [
     "objectui",

package/dist/packages/plugin-markdown/src/MarkdownImpl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MarkdownImpl.d.ts","sourceRoot":"","sources":["../../../../src/MarkdownImpl.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAoC7E"}

package/dist/packages/plugin-markdown/src/index.d.ts

@@ -1,19 +0,0 @@
-import { default as React } from 'react';
-export type { MarkdownSchema } from './types';
-export interface MarkdownRendererProps {
-    schema: {
-        type: string;
-        id?: string;
-        className?: string;
-        content?: string;
-    };
-}
-/**
- * MarkdownRenderer - The public API for the markdown component
- * This wrapper handles lazy loading internally using React.Suspense
- */
-export declare const MarkdownRenderer: React.FC<MarkdownRendererProps>;
-export declare const markdownComponents: {
-    markdown: React.FC<MarkdownRendererProps>;
-};
-//# sourceMappingURL=index.d.ts.map

package/dist/packages/plugin-markdown/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAM9C,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAS5D,CAAC;AA2BF,eAAO,MAAM,kBAAkB;;CAE9B,CAAC"}

package/dist/packages/plugin-markdown/src/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,IAAI,EAAE,UAAU,CAAC;IAEjB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}