feat: integrate centered flow node positioning in canvas components

- Added useCenteredFlowNodePosition hook to improve node placement in the CanvasCommandPalette and CanvasToolbar.
- Updated node creation logic to utilize centered positioning, enhancing the visual layout and user experience during node interactions.
- Refactored offset calculations to stagger node positions based on the current node count, ensuring a more organized canvas layout.

components/canvas/canvas-command-palette.tsx

@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 
 import { useCanvasPlacement } from "@/components/canvas/canvas-placement-context";
+import { useCenteredFlowNodePosition } from "@/hooks/use-centered-flow-node-position";
 import {
   Command,
   CommandDialog,
@@ -53,6 +54,7 @@ const NODE_SEARCH_KEYWORDS: Partial<
 export function CanvasCommandPalette() {
   const [open, setOpen] = useState(false);
   const { createNodeWithIntersection } = useCanvasPlacement();
+  const getCenteredPosition = useCenteredFlowNodePosition();
   const { setTheme } = useTheme();
   const nodeCountRef = useRef(0);
 
@@ -73,12 +75,12 @@ export function CanvasCommandPalette() {
     width: number,
     height: number,
   ) => {
-    const offset = (nodeCountRef.current % 8) * 24;
+    const stagger = (nodeCountRef.current % 8) * 24;
     nodeCountRef.current += 1;
     setOpen(false);
     void createNodeWithIntersection({
       type,
-      position: { x: 100 + offset, y: 100 + offset },
+      position: getCenteredPosition(width, height, stagger),
       width,
       height,
       data,