styles

src/components/ConfigNode.tsx

@@ -127,8 +127,19 @@ export default function ConfigNode({ id, data }: Props) {
                 Stored YAML: {storedYaml ? `${storedYaml.length} chars` : 'none'}
             </div>
 
-            <Handle type="source" position={Position.Right} id="out" style={{ background: '#10B981', right: -6 }} />
-            <Handle type="target" position={Position.Left} id="in" style={{ background: '#F97316', left: -6 }} />
+            <Handle
+                type="target"
+                position={Position.Left}
+                id="ain"
+                style={{ background: '#F97316', top: 20, width: 12, height: 12, borderRadius: 3 }}
+            />
+
+            <Handle
+                type="source"
+                position={Position.Right}
+                id="out"
+                style={{ background: '#10B981', top: 20, width: 12, height: 12, borderRadius: 3 }}
+            />
         </div>
     )
 }

src/components/RenderingNode.tsx

@@ -102,7 +102,20 @@ export default function RenderingNode({ id }: Props) {
                 <div className="text-xs text-gray-400">RENDERER</div>
             </div>
             <pre className="text-xs text-gray-800 max-h-40 overflow-auto p-3">{output}</pre>
-            <Handle type="target" position={Position.Left} id="in" style={{ background: '#F97316' }} />
+
+            <Handle
+                type="target"
+                position={Position.Left}
+                id="ain"
+                style={{ background: '#F97316', top: 20, width: 12, height: 12, borderRadius: 3 }}
+            />
+
+            <Handle
+                type="source"
+                position={Position.Right}
+                id="out"
+                style={{ background: '#10B981', top: 20, width: 12, height: 12, borderRadius: 3 }}
+            />
         </div>
     )
 }