"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Diagram({ children: source, theme = "default", id, onError, className, ...rest }) {
  const [svg, setSvg] = React.useState("");
  const [error, setError] = React.useState(null);
  const onErrorRef = React.useRef(onError);
  onErrorRef.current = onError;
  const reactId = React.useId();
  const stableId = id ?? `hex-diagram-${reactId.replace(/:/g, "-")}`;
  React.useEffect(() => {
    let cancelled = false;
    setError(null);
    void (async () => {
      try {
        const { default: mermaid } = await import('mermaid');
        if (cancelled) return;
        mermaid.initialize({ startOnLoad: false, theme, securityLevel: "strict" });
        const { svg: rendered } = await mermaid.render(stableId, source);
        if (!cancelled) setSvg(rendered);
      } catch (err) {
        const message = err instanceof Error ? err.message : String(err);
        if (cancelled) return;
        setError(message);
        onErrorRef.current?.(message);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [source, theme, stableId]);
  if (error) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ...rest,
        "data-hex-diagram-error": true,
        role: "alert",
        className: cn(
          "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",
          className
        ),
        children: [
          /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Diagram failed to render" }),
          /* @__PURE__ */ jsx("pre", { className: "mt-1 whitespace-pre-wrap text-xs opacity-80", children: error })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...rest,
      "data-hex-diagram": true,
      "data-theme": theme,
      className: cn("overflow-auto rounded-md border bg-background p-3", className),
      dangerouslySetInnerHTML: { __html: svg }
    }
  );
}

export { Diagram };
//# sourceMappingURL=diagram.js.map
//# sourceMappingURL=diagram.js.map