added code

Author: RanitManik

app/index.css

@@ -44,7 +44,7 @@
 
 .dndflow .dndnode.process {
     background-color: white;
-    border-color: #ff0072;
+    border-color: #f57dbd;
 }
 
 .dndflow .reactflow-wrapper {
@@ -92,11 +92,21 @@
     border-radius: var(--xy-node-border-radius-default);
     background-color: var(--xy-node-background-color-default);
     text-align: center;
-    padding: 10px;
+    padding: 15px 20px;
     font-size: 12px;
     border: var(--xy-node-border-default);
     border-color: var(--xy-theme-selected);
-    color: var(--xy-node-color-default);
+    color: #cb458d;
+}
+
+/*
+this is styling for a
+process react-flow-node
+which is not a descendant of any stage
+*/
+
+.independent-process-node {
+    background-color: #fff0f5;
 }
 
 .react-flow__node.selectable:focus {
@@ -115,7 +125,9 @@
 }
 
 .react-flow__node-LabeledGroupNode {
-    background-color: rgba(207, 182, 255, 0.4) !important;
+    padding: 0;
+    background-color: rgba(207, 182, 255, 0.4);
+    color: #704af2;
 }
 
 .react-flow__node-LabeledGroupNode.selectable {
@@ -130,18 +142,31 @@
     border-color: black;
 }
 
-.react-flow__node-group {
-    background-color: rgba(207, 182, 255, 0.4);
-    border-color: #9e86ed;
-}
-
 .react-flow__edge.selectable:hover .react-flow__edge-path,
 .react-flow__edge.selectable.selected .react-flow__edge-path {
     stroke: var(--xy-theme-edge-hover);
 }
 
 .react-flow__handle {
     background-color: var(--xy-handle-background-color-default);
+    width: 10px;
+    height: 10px;
+}
+
+.react-flow__node .react-flow__handle.connectionindicator,
+.react-flow__node .react-flow__handle {
+    background-color: #cb458d;
+    border-color: white;
+    width: 10px;
+    height: 10px;
+}
+
+.react-flow__node-LabeledGroupNode .react-flow__handle.connectionindicator,
+.react-flow__node-LabeledGroupNode .react-flow__handle {
+    background-color: #704af2;
+    border-color: white;
+    width: 14px;
+    height: 14px;
 }
 
 .react-flow__handle.connectionindicator:hover {
@@ -150,10 +175,21 @@
     background-color: white;
 }
 
+.react-flow__node .react-flow__handle.connectionindicator:hover {
+    background-color: white;
+    border-color: #cb458d;
+}
+
+.react-flow__node-LabeledGroupNode
+    .react-flow__handle.connectionindicator:hover {
+    background-color: white;
+    border-color: #704af2;
+}
+
 .react-flow__handle.connectionindicator:focus,
 .react-flow__handle.connectingfrom,
 .react-flow__handle.connectingto {
-    border-color: var(--xy-theme-edge-hover);
+    border-color: white;
 }
 
 .react-flow__node-resizer {

app/page.jsx

@@ -43,9 +43,6 @@ export default function Page() {
     const [nodes, setNodes] = useNodesState([]);
     const [edges, setEdges] = useEdgesState([]);
 
-    console.log(edges);
-    console.log(nodes);
-
     // drag and drop providers setup
     const { screenToFlowPosition } = useReactFlow();
     const [type] = useDnD();
@@ -185,6 +182,8 @@ export default function Page() {
                     newNode.position.x - bestParent.parentNode.position.x;
                 newNode.position.y =
                     newNode.position.y - bestParent.parentNode.position.y;
+            } else {
+                newNode.className = "independent-process-node";
             }
 
             // Add the new node to the state

components/base-node.tsx

@@ -5,6 +5,6 @@ export const BaseNode = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement> & { selected?: boolean }
 >(({ className, selected, ...props }, ref) => (
-    <div ref={ref} className={cn("p-5", className)} {...props} />
+    <div ref={ref} className={cn(className)} {...props} />
 ));
 BaseNode.displayName = "BaseNode";

components/custom-child-node.tsx

@@ -4,12 +4,9 @@ import { BaseNode } from "@/components/base-node";
 export function CustomChildNode({ data, selected }: any) {
     const { label } = data;
     return (
-        <BaseNode
-            selected={selected}
-            className="h-full overflow-hidden rounded-sm"
-        >
+        <BaseNode selected={selected}>
             {label && (
-                <div className="flex h-full w-full items-end justify-between">
+                <div>
                     <span className="text-xs font-medium">{label}</span>
                 </div>
             )}

components/labeled-group-node.tsx

@@ -4,32 +4,20 @@ import { BaseNode } from "@/components/base-node";
 export function LabeledGroupNode({ id, data, selected }: any) {
     const { label } = data;
 
-    const controlStyle = {
-        background: "transparent",
-        border: "none",
-    };
-
     return (
         <BaseNode
             selected={selected}
-            className="h-full overflow-hidden rounded-sm p-0"
             style={{
                 width: 600,
                 height: 300,
             }}
         >
-            <NodeResizeControl
-                style={controlStyle}
-                minWidth={400}
-                minHeight={250}
-            >
+            <NodeResizeControl minWidth={400} minHeight={250}>
                 <ResizeIcon />
             </NodeResizeControl>
             {label && (
                 <div className="absolute -top-7 flex w-full items-end justify-between">
-                    <span className="text-sm font-bold text-primary">
-                        {label}
-                    </span>
+                    <span className="text-sm font-bold">{label}</span>
                 </div>
             )}
             <Handle type="target" position={Position.Left} />