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,

components/canvas/canvas-toolbar.tsx

@@ -5,6 +5,7 @@ import { useRef } from "react";
 import { CreditDisplay } from "@/components/canvas/credit-display";
 import { ExportButton } from "@/components/canvas/export-button";
 import { useCanvasPlacement } from "@/components/canvas/canvas-placement-context";
+import { useCenteredFlowNodePosition } from "@/hooks/use-centered-flow-node-position";
 import {
   CANVAS_NODE_TEMPLATES,
   type CanvasNodeTemplate,
@@ -18,6 +19,7 @@ export default function CanvasToolbar({
   canvasName,
 }: CanvasToolbarProps) {
   const { createNodeWithIntersection } = useCanvasPlacement();
+  const getCenteredPosition = useCenteredFlowNodePosition();
   const nodeCountRef = useRef(0);
 
   const handleAddNode = async (
@@ -26,11 +28,11 @@ export default function CanvasToolbar({
     width: number,
     height: number,
   ) => {
-    const offset = (nodeCountRef.current % 8) * 24;
+    const stagger = (nodeCountRef.current % 8) * 24;
     nodeCountRef.current += 1;
     await createNodeWithIntersection({
       type,
-      position: { x: 100 + offset, y: 100 + offset },
+      position: getCenteredPosition(width, height, stagger),
       width,
       height,
       data,