refactor: defaults should be in their own file, respecting eslint/ react standards. all tests fail, obviously.

ref: N25B-294

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

@@ -3,7 +3,6 @@ import { useReactFlow, type XYPosition } from '@xyflow/react';
 import { type ReactNode, useCallback, useRef, useState } from 'react';
 import useFlowStore from '../VisProgStores';
 import styles from '../../VisProg.module.css';
-import type { AppNode } from '../VisProgTypes';
 import { NodeDefaults, type NodeTypes } from '../NodeRegistry'
 
 /**
@@ -48,7 +47,7 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
  * addNode — adds a new node to the flow using the unified class-based system.
  * Keeps numbering logic for phase/norm nodes.
  */
-export function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+  function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
   const { nodes, setNodes } = useFlowStore.getState();
   const defaultData = NodeDefaults[nodeType]
 
@@ -67,7 +66,7 @@ export function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition)
 
   const id = `${nodeType}-${nextNumber}`;
   
-  let newNode = {
+  const newNode = {
     id: id,
     type: nodeType,
     position,
@@ -106,7 +105,7 @@ export function DndToolbar() {
 
 
   const droppableNodes = Object.entries(NodeDefaults)
-  .filter(([_, data]) => data.droppable)
+  .filter(([, data]) => data.droppable)
   .map(([type, data]) => ({ 
     type: type as DraggableNodeProps['nodeType'], 
     data 

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

@@ -0,0 +1,84 @@
+import {
+  NodeToolbar} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import styles from '../../VisProg.module.css';
+import useFlowStore from "../VisProgStores.tsx";
+
+//Toolbar definitions
+type ToolbarProps = {
+  nodeId: string;
+  allowDelete: boolean;
+};
+
+
+/**
+ * Node Toolbar definition:
+ * handles: node deleting functionality
+ * can be added to any custom node component as a React component
+ *
+ * @param {string} nodeId
+ * @param {boolean} allowDelete
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
+  const {deleteNode} = useFlowStore();
+
+  const deleteParentNode = ()=> {
+    deleteNode(nodeId);
+  }
+  return (
+    <NodeToolbar>
+      <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
+    </NodeToolbar>);
+}
+
+// Renaming component
+/**
+ * Adds a component that can be used to edit a node's label entry inside its Data
+ * can be added to any custom node that has a label inside its Data
+ *
+ * @param {string} nodeLabel
+ * @param {string} nodeId
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export function EditableName({nodeLabel = "new node", nodeId} : { nodeLabel : string, nodeId: string}) {
+  const {updateNodeData} = useFlowStore();
+
+  const updateData  = (event: React.FocusEvent<HTMLInputElement>) => {
+    const input = event.target.value;
+    updateNodeData(nodeId, {label: input});
+    event.currentTarget.setAttribute("readOnly", "true");
+    window.getSelection()?.empty();
+    event.currentTarget.classList.replace("nodrag", "drag"); // enable dragging of the node with cursor on the input box
+  };
+
+  const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
+
+  const enableEditing = (event: React.MouseEvent<HTMLInputElement>) => {
+    if(event.currentTarget.hasAttribute("readOnly")) {
+      event.currentTarget.removeAttribute("readOnly"); // enable editing
+      event.currentTarget.select(); // select the text input
+      window.getSelection()?.collapseToEnd(); // move the caret to the end of the current value
+      event.currentTarget.classList.replace("drag", "nodrag"); // disable dragging using input box
+    }
+  }
+
+  return (
+    <div className={styles.NodeTextBar }>
+      <label>name: </label>
+      <input
+        className={`drag ${styles.nodeTextInput}`} // prevents dragging the component when user has focused the text input
+        type={"text"}
+        defaultValue={nodeLabel}
+        onKeyDown={updateOnEnter}
+        onBlur={updateData}
+        onClick={enableEditing}
+        maxLength={25}
+        readOnly
+      />
+    </div>
+  )
+}
+