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

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Canvas({
  nodes,
  edges,
  onNodesChange,
  onEdgesChange,
  onConnect,
  hideControls = false,
  hideBackground = false,
  fitView = true,
  children,
  className,
  ...rest
}) {
  const [rf, setRf] = React.useState(null);
  React.useEffect(() => {
    let cancelled = false;
    void import('reactflow').then((mod) => {
      if (!cancelled) setRf(mod);
    });
    return () => {
      cancelled = true;
    };
  }, []);
  if (!rf) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ...rest,
        "data-hex-canvas-loading": true,
        className: cn("h-full w-full bg-muted/20", className),
        "aria-busy": "true"
      }
    );
  }
  const { ReactFlow, Background, Controls } = rf;
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...rest,
      "data-hex-canvas": true,
      className: cn("h-full w-full", className),
      children: /* @__PURE__ */ jsxs(
        ReactFlow,
        {
          nodes,
          edges,
          onNodesChange,
          onEdgesChange,
          onConnect,
          fitView,
          children: [
            !hideBackground && /* @__PURE__ */ jsx(Background, {}),
            !hideControls && /* @__PURE__ */ jsx(Controls, {}),
            children
          ]
        }
      )
    }
  );
}

export { Canvas };
//# sourceMappingURL=canvas.js.map
//# sourceMappingURL=canvas.js.map