Set up scaffolding for connections

app/w/components/blocks/components/workflow-block/components/connection/connection-point.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils'
+
+interface ConnectionPointProps {
+  position: 'top' | 'bottom'
+}
+
+export function ConnectionPoint({ position }: ConnectionPointProps) {
+  return (
+    <div
+      className={cn(
+        'absolute left-1/2 -translate-x-1/2 w-3 h-3',
+        'bg-white rounded-full border opacity-0 group-hover:opacity-100',
+        'transition-opacity duration-200 cursor-crosshair hover:border-blue-500',
+        'hover:scale-110 hover:shadow-sm',
+        position === 'top'
+          ? '-translate-y-1/2 top-0'
+          : 'translate-y-1/2 bottom-0'
+      )}
+    />
+  )
+}

app/w/components/blocks/components/workflow-block/workflow-block.tsx

@@ -1,8 +1,9 @@
 import { Card } from '@/components/ui/card'
 import { BlockConfig, SubBlockConfig } from '../../types/block'
 import { cn } from '@/lib/utils'
-import { SubBlock } from './sub-block/sub-block'
+import { SubBlock } from './components/sub-block/sub-block'
 import { useCallback, useState, MouseEvent, useEffect } from 'react'
+import { ConnectionPoint } from './components/connection/connection-point'
 
 export interface WorkflowBlockProps {
   id: string
@@ -109,7 +110,7 @@ export function WorkflowBlock({
   return (
     <Card
       className={cn(
-        'absolute w-[320px] shadow-md cursor-move select-none',
+        'absolute w-[320px] shadow-md cursor-move select-none group',
         'transform -translate-x-1/2 -translate-y-1/2',
         isDragging && 'pointer-events-none'
       )}
@@ -119,6 +120,8 @@ export function WorkflowBlock({
       }}
       onMouseDown={handleMouseDown}
     >
+      <ConnectionPoint position="top" />
+
       <div className="flex items-center gap-3 p-3 border-b">
         <div
           className="flex items-center justify-center w-7 h-7 rounded"
@@ -146,6 +149,8 @@ export function WorkflowBlock({
           </div>
         ))}
       </div>
+
+      <ConnectionPoint position="bottom" />
     </Card>
   )
 }