import { FlowDiagram as e } from "../../visualization/flow-diagram/index.js";
import { t } from "../../utils-B7XIe3qq.js";
import { useEffect as n, useRef as r } from "react";
import { jsx as i } from "react/jsx-runtime";
//#region src/react/primitives/flow-diagram.tsx
function a({ nodes: a, edges: o, direction: s = "TB", zoomable: c = !0, pannable: l = !0, onNodeClick: u, onEdgeClick: d, className: f }) {
	let p = r(null), m = r(null), h = r(u);
	h.current = u;
	let g = r(d);
	return g.current = d, n(() => {
		let t = p.current;
		if (t) return m.current = new e({
			container: t,
			nodes: a,
			edges: o,
			direction: s,
			zoomable: c,
			pannable: l,
			onNodeClick: (e) => h.current?.(e),
			onEdgeClick: (e) => g.current?.(e)
		}), () => {
			m.current?.destroy(), m.current = null;
		};
	}, [
		s,
		c,
		l
	]), n(() => {
		m.current && m.current.update(a, o);
	}, [a, o]), /* @__PURE__ */ i("div", {
		ref: p,
		"data-slot": "flow-diagram",
		className: t("relative h-full w-full overflow-hidden", f)
	});
}
a.displayName = "FlowDiagram";
//#endregion
export { a as FlowDiagram };

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