Upload components/Canvas.jsx with huggingface_hub

components/Canvas.jsx

@@ -0,0 +1,65 @@
+import Node from './Node';
+
+export default function Canvas({ 
+  nodes, 
+  connections, 
+  selectedNodeId, 
+  selectionSet,
+  onNodeSelect, 
+  onNodeMouseDown, 
+  onCanvasClick,
+  running 
+}) {
+  return (
+    <div 
+      className="flex-1 bg-deep relative overflow-hidden cursor-grab active:cursor-grabbing bg-[length:40px_40px] bg-grid-pattern"
+      onClick={onCanvasClick}
+    >
+      {/* SVG Connections Layer */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none z-0">
+        <defs>
+          <linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" style={{ stopColor: '#3b82f6', stopOpacity: 0.2 }} />
+            <stop offset="100%" style={{ stopColor: '#3b82f6', stopOpacity: 1 }} />
+          </linearGradient>
+        </defs>
+        {connections.map((conn, i) => {
+          const fromNode = nodes.find(n => n.id === conn.from);
+          const toNode = nodes.find(n => n.id === conn.to);
+          if (!fromNode || !toNode) return null;
+
+          // Simple Bezier calculation (assuming node width ~176px, height ~dynamic)
+          // Center bottom of source to Center top of target
+          const x1 = fromNode.x + 88; // half of w-44
+          const y1 = fromNode.y + 80; // approx height
+          const x2 = toNode.x + 88;
+          const y2 = toNode.y;
+
+          const d = `M ${x1} ${y1} C ${x1} ${y1 + 60}, ${x2} ${y2 - 60}, ${x2} ${y2}`;
+
+          return (
+            <path
+              key={i}
+              d={d}
+              fill="none"
+              stroke="url(#line-gradient)"
+              strokeWidth="2"
+              className={running ? 'connection-line' : ''}
+            />
+          );
+        })}
+      </svg>
+
+      {/* Nodes Layer */}
+      {nodes.map(node => (
+        <Node
+          key={node.id}
+          node={node}
+          isSelected={selectedNodeId === node.id}
+          onSelect={onNodeSelect}
+          onMouseDown={onNodeMouseDown}
+        />
+      ))}
+    </div>
+  );
+}