feat: add cmdk dependency and enhance canvas node creation with edge splitting functionality

- Introduced the cmdk package for improved command palette capabilities.
- Enhanced the canvas placement context to support creating nodes with edge splitting, allowing for more dynamic node interactions.
- Updated the canvas inner component to utilize optimistic updates for node creation, improving user experience during interactions.
- Refactored node handling logic to incorporate new mutation types and streamline data management.

components/canvas/nodes/base-node-wrapper.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { NodeResizeControl, NodeToolbar, Position, useNodeId, useReactFlow } from "@xyflow/react";
-import { Trash2, Copy } from "lucide-react";
+import { Trash2, Copy, Loader2 } from "lucide-react";
 import { useCanvasPlacement } from "@/components/canvas/canvas-placement-context";
 import { NodeErrorBoundary } from "./node-error-boundary";
 
@@ -46,6 +46,7 @@ function NodeToolbarActions() {
   const nodeId = useNodeId();
   const { deleteElements, getNode, getNodes, setNodes } = useReactFlow();
   const { createNodeWithIntersection } = useCanvasPlacement();
+  const [isDuplicating, setIsDuplicating] = useState(false);
 
   const handleDelete = () => {
     if (!nodeId) return;
@@ -53,10 +54,13 @@ function NodeToolbarActions() {
   };
 
   const handleDuplicate = async () => {
-    if (!nodeId) return;
+    if (!nodeId || isDuplicating) return;
     const node = getNode(nodeId);
     if (!node) return;
 
+    setIsDuplicating(true);
+
+    try {
     // Strip internal/runtime fields, keep only user content
     const originalData = (node.data ?? {}) as Record<string, unknown>;
     const cleanedData: Record<string, unknown> = {};
@@ -112,6 +116,9 @@ function NodeToolbarActions() {
     };
 
     selectCreatedNode();
+    } finally {
+      setIsDuplicating(false);
+    }
   };
 
   const stopPropagation = (e: React.MouseEvent | React.PointerEvent) => {
@@ -123,12 +130,17 @@ function NodeToolbarActions() {
       <div className="flex items-center gap-1 rounded-lg border bg-card p-1 shadow-md">
         <button
           type="button"
-          onClick={(e) => { stopPropagation(e); handleDuplicate(); }}
+          onClick={(e) => { stopPropagation(e); void handleDuplicate(); }}
           onPointerDown={stopPropagation}
-          title="Duplicate"
-          className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          title={isDuplicating ? "Duplicating…" : "Duplicate"}
+          disabled={isDuplicating}
+          className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-wait"
         >
-          <Copy size={14} />
+          {isDuplicating ? (
+            <Loader2 size={14} className="animate-spin" />
+          ) : (
+            <Copy size={14} />
+          )}
         </button>
         <button
           type="button"