import { MermaidDiagram as e } from "../../visualization/mermaid-diagram/index.js";
import { t } from "../../utils-B7XIe3qq.js";
import { useEffect as n, useRef as r, useState as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/react/primitives/mermaid-diagram.tsx
function o({ content: o, theme: s = "auto", onRenderStart: c, onRenderComplete: l, onRenderError: u, className: d }) {
	let f = r(null), p = r(null), [, m] = i(0), h = r(c);
	h.current = c;
	let g = r(l);
	g.current = l;
	let _ = r(u);
	return _.current = u, n(() => {
		let t = f.current;
		if (t) return p.current = new e({
			container: t,
			content: o,
			theme: s,
			onRenderStart: () => h.current?.(),
			onRenderComplete: (e) => {
				g.current?.(e), m((e) => e + 1);
			},
			onRenderError: (e) => _.current?.(e)
		}), () => {
			p.current?.destroy(), p.current = null;
		};
	}, [s]), n(() => {
		p.current && p.current.update(o);
	}, [o]), /* @__PURE__ */ a("div", {
		ref: f,
		"data-slot": "mermaid-diagram",
		className: t("relative w-full overflow-auto", d)
	});
}
o.displayName = "MermaidDiagram";
//#endregion
export { o as MermaidDiagram };

//# sourceMappingURL=mermaid-diagram.js.map