Adding splitter between designer and properties

src/components/workflows/assets/Workflows.css

@@ -7,15 +7,67 @@
     cursor: grabbing;
 }
 
+.wkf-splitter {
+  cursor: row-resize;
+  height: 1px;
+  background-color: var(--color-splitter);
+  margin: 4px 0;
+  transition: background-color 0.2s;
+  position: relative; /* Ensure the parent has position relative */
+
+}
+
+.wkf-splitter::after {
+  --color-resize: var(--color-splitter);
+  content: ''; /* This is required */
+  position: absolute; /* Position as needed */
+  z-index: 1;
+  display: block; /* Makes it a block element */
+  height: 6px;
+  width: 20px;
+  background-color: var(--color-splitter);
+
+  /* Center horizontally */
+  left: 50%;
+  transform: translateX(-50%);
+
+  /* Center vertically */
+  top: 50%;
+  margin-top: -3px; /* Half of the height */
+  /* Alternatively: transform: translate(-50%, -50%); */
+}
+
+
+.wkf-splitter:hover, .wkf-splitter-active {
+  background-color: var(--color-splitter-active);
+}
+
+.wkf-designer {
+  min-height: 230px;
+}
+
+.wkf-properties {
+  box-sizing: border-box;
+}
+
 .wkf-canvas {
   position: relative;
-  min-height: 230px;
   background-image:
       linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
   background-size: 20px 20px;
 }
 
+.wkf-toolbox {
+  min-height: 230px;
+  width: 8rem;        /* w-32 (32 * 0.25rem = 8rem) */
+  padding: 0.5rem;    /* p-2 */
+  background-color: var(--color-base-100);  /* bg-base-100 */
+  border-radius: 0.5rem;  /* rounded-lg */
+  border-width: 1px;  /* border */
+}
+
+
 .wkf-workflow-component {
   position: absolute;
   cursor: move;
@@ -66,7 +118,6 @@
   background: #ef4444;
 }
 
-
 .wkf-output-point {
   right: -6px;
   top: 50%;
@@ -88,3 +139,4 @@
     70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
     100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
 }
+