feat: seperation of concerns for gesture value editor, adjusting output of nodes, integration testing, css file changes, and probably much more.

ref: N25B-412

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -69,23 +69,11 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
  * @param position - The XY position in the flow canvas where the node will appear.
  */
 function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
-  const { nodes, addNode } = useFlowStore.getState();
+  const { addNode } = useFlowStore.getState();
 
   // Load any predefined data for this node type.
   const defaultData = NodeDefaults[nodeType] ?? {}
-  
-  // Currently, we find out what the Id is by checking the last node and adding one.
-  const sameTypeNodes = nodes.filter((node) => node.type === nodeType);
-  const nextNumber =
-    sameTypeNodes.length > 0
-      ? (() => {
-          const lastNode = sameTypeNodes[sameTypeNodes.length - 1];
-          const parts = lastNode.id.split('-');
-          const lastNum = Number(parts[1]);
-          return Number.isNaN(lastNum) ? sameTypeNodes.length + 1 : lastNum + 1;
-        })()
-      : 1;
-  const id = `${nodeType}-${nextNumber}`;
+  const id = crypto.randomUUID();
   
   // Create new node
   const newNode = {