fix(canvas): scope the receive gate, cover both swell directions

Gating the foreign-drag listener also ran the shared pointer-tracking
reset, which belongs to the card's own hover. A trigger sets
canReceiveConnection false while canStartConnection stays true, so the
reset undid the layout effect's :hover bootstrap and left a card that
mounted under the pointer with no source swell until the pointer left
and came back. Skip the listener instead; the effect's own cleanup
already covers a true-to-false flip.

Drop the trigger-only cursorSwellSides restriction. A swell on a
trigger's input edge resolves to a source handle, so an edge genuinely
can be made there — it was a behavior change beyond the bug, not a
phantom.

Cover both directions of the swell gate, and use the shared sleep helper
in the action-bar test. Hoist the constant connection sides out of the
render body so they stop riding the borderPorts dep array.

Author: waleedlatif1

packages/workflow-renderer/src/workflow-block/use-action-menu-swell.test.tsx

@@ -7,7 +7,9 @@
  * still watching once the pointer is off the node, because no further
  * `pointerleave` can arrive.
  */
+
 import { act, useEffect } from 'react'
+import { sleep } from '@sim/utils/helpers'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeAll, describe, expect, it } from 'vitest'
 import { useActionMenuSwell } from './use-action-menu-swell'
@@ -20,6 +22,8 @@ beforeAll(() => {
   } as unknown as typeof ResizeObserver
 })
 
+/** Clears the hook's 100ms hover-leave delay and its 40ms swell close with margin. */
+const SETTLE_PASS_MS = 160
 const ACTION_MENU_RECT = { left: 100, right: 240, top: 40, bottom: 70 }
 /** Comfortably outside the bar's hover band, which extends 28px above `top`. */
 const AWAY_POINT = { clientX: 600, clientY: 400 }
@@ -87,7 +91,7 @@ function pointerEvent(type: string, init: PointerEventInit) {
 async function settle() {
   for (let pass = 0; pass < 2; pass++) {
     await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 160))
+      await sleep(SETTLE_PASS_MS)
     })
   }
 }
@@ -113,7 +117,6 @@ describe('useActionMenuSwell', () => {
     })
     expect(state.swellOpen).toBe(true)
 
-    /* Leaving the card arms the retract and installs the gap tracker. */
     act(() => {
       node.dispatchEvent(pointerEvent('pointerleave', {}))
     })

packages/workflow-renderer/src/workflow-block/workflow-block-border-connectable.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * A "port" on a card is a swell painted into the border silhouette, not a DOM
+ * node, so nothing about drawing one forces a handle to exist behind it. These
+ * cover the two directions independently: a card that mounts no source handle
+ * must not raise a swell under its own hover, and a card that mounts no target
+ * handle must not raise one under a connection dragged from somewhere else.
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { WorkflowBlockBorder, type WorkflowBorderPort } from '../index'
+
+const CARD = { left: 200, top: 100, width: 350, height: 120 }
+const CARD_RECT = {
+  left: CARD.left,
+  top: CARD.top,
+  right: CARD.left + CARD.width,
+  bottom: CARD.top + CARD.height,
+  width: CARD.width,
+  height: CARD.height,
+  x: CARD.left,
+  y: CARD.top,
+  toJSON: () => ({}),
+} as DOMRect
+
+/** Where a source knob sits. */
+const RIGHT_EDGE = { x: CARD.left + CARD.width, y: CARD.top + CARD.height / 2 }
+/** Where a target knob sits. */
+const LEFT_EDGE = { x: CARD.left, y: CARD.top + CARD.height / 2 }
+
+/*
+ * The phantom swell these cover is the pointer-following one, which forms
+ * anywhere on the perimeter; leaving knobs out keeps it from magnetizing into
+ * one and handing the handle off, which is a different path.
+ */
+const PORTS: WorkflowBorderPort[] = []
+
+const mountedRoots = new Set<Root>()
+const mountedHosts = new Set<HTMLDivElement>()
+
+beforeAll(() => {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+})
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  )
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+    window.setTimeout(() => callback(performance.now()), 16)
+  )
+  vi.stubGlobal('cancelAnimationFrame', (frameId: number) => window.clearTimeout(frameId))
+})
+
+afterEach(() => {
+  act(() => {
+    mountedRoots.forEach((root) => root.unmount())
+  })
+  mountedRoots.clear()
+  mountedHosts.forEach((host) => host.remove())
+  mountedHosts.clear()
+  vi.unstubAllGlobals()
+  vi.useRealTimers()
+})
+
+interface MountOptions {
+  connectionNodeId?: string | null
+  canStartConnection?: boolean
+  canReceiveConnection?: boolean
+}
+
+function mountBorder({
+  connectionNodeId = null,
+  canStartConnection,
+  canReceiveConnection,
+}: MountOptions) {
+  const onCursorHandleChange = vi.fn()
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  mountedRoots.add(root)
+  mountedHosts.add(host)
+
+  act(() => {
+    root.render(
+      <WorkflowBlockBorder
+        nodeId='block-1'
+        getConnectionNodeId={() => connectionNodeId}
+        ports={PORTS}
+        canStartConnection={canStartConnection}
+        canReceiveConnection={canReceiveConnection}
+        hasRing={false}
+        ringStyles=''
+        width={CARD.width}
+        height={CARD.height}
+        onCursorHandleChange={onCursorHandleChange}
+      />
+    )
+  })
+
+  /*
+   * The tracker measures the swell host — the SVG's parent — and jsdom lays
+   * nothing out, so the card's box has to be supplied.
+   */
+  const svg = host.querySelector('svg')
+  const swellHost = svg?.parentElement
+  if (!swellHost) throw new Error('border did not mount')
+  swellHost.getBoundingClientRect = () => CARD_RECT
+  host.getBoundingClientRect = () => CARD_RECT
+  document.elementFromPoint = () => swellHost
+
+  onCursorHandleChange.mockClear()
+  return { swellHost, onCursorHandleChange }
+}
+
+function pointerEvent(type: string, x: number, y: number) {
+  return new MouseEvent(type, {
+    bubbles: true,
+    clientX: x,
+    clientY: y,
+  }) as unknown as PointerEvent
+}
+
+/**
+ * Handles the border actually offered. A `null` call is the tracker reporting
+ * "no swell", which is the very state these assert, so counting bare calls
+ * would read a correct teardown as a phantom port.
+ */
+function offeredHandles(spy: ReturnType<typeof vi.fn>) {
+  return spy.mock.calls.filter(([handle]) => handle != null)
+}
+
+/** Runs the spring far enough for the swell to reach the drawn threshold. */
+function advanceSprings() {
+  act(() => {
+    vi.advanceTimersByTime(500)
+  })
+}
+
+describe('WorkflowBlockBorder connectability', () => {
+  it('raises a swell under its own hover by default', () => {
+    const { swellHost, onCursorHandleChange } = mountBorder({})
+
+    act(() => {
+      swellHost.dispatchEvent(pointerEvent('pointerenter', RIGHT_EDGE.x, RIGHT_EDGE.y))
+      window.dispatchEvent(pointerEvent('pointermove', RIGHT_EDGE.x, RIGHT_EDGE.y))
+    })
+    advanceSprings()
+
+    expect(offeredHandles(onCursorHandleChange).length).toBeGreaterThan(0)
+  })
+
+  it('raises no swell under its own hover when it can start no connection', () => {
+    const { swellHost, onCursorHandleChange } = mountBorder({ canStartConnection: false })
+
+    act(() => {
+      swellHost.dispatchEvent(pointerEvent('pointerenter', RIGHT_EDGE.x, RIGHT_EDGE.y))
+      window.dispatchEvent(pointerEvent('pointermove', RIGHT_EDGE.x, RIGHT_EDGE.y))
+    })
+    advanceSprings()
+
+    expect(offeredHandles(onCursorHandleChange)).toHaveLength(0)
+  })
+
+  it('raises a swell under a connection dragged from another card by default', () => {
+    const { onCursorHandleChange } = mountBorder({ connectionNodeId: 'other-block' })
+
+    act(() => {
+      window.dispatchEvent(pointerEvent('pointermove', LEFT_EDGE.x, LEFT_EDGE.y))
+    })
+    advanceSprings()
+
+    expect(offeredHandles(onCursorHandleChange).length).toBeGreaterThan(0)
+  })
+
+  it('raises no swell under a foreign drag when it can receive no connection', () => {
+    const { onCursorHandleChange } = mountBorder({
+      connectionNodeId: 'other-block',
+      canReceiveConnection: false,
+    })
+
+    act(() => {
+      window.dispatchEvent(pointerEvent('pointermove', LEFT_EDGE.x, LEFT_EDGE.y))
+    })
+    advanceSprings()
+
+    expect(offeredHandles(onCursorHandleChange)).toHaveLength(0)
+  })
+})

packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx

@@ -1450,10 +1450,10 @@ export function WorkflowBlockBorder({
         // returning to an edge immediately restores the swell.
         if (isPointerOverTrackingRoot(clientX, clientY)) {
           /*
-           * Drop the magnetized port too. Only the in-band path below
-           * recomputes it, so leaving the band upward onto the action bar left
-           * the last knob pinned at hover amplitude — the card kept a port
-           * puffed out with the pointer nowhere near it.
+           * Only the in-band path below recomputes the magnetized port, so
+           * leaving the band upward onto the action bar left the last knob
+           * pinned at hover amplitude — a port puffed out with the pointer
+           * nowhere near it.
            */
           hoveredPortRef.current = null
           cursorHoverAllowedRef.current = false
@@ -1633,10 +1633,16 @@ export function WorkflowBlockBorder({
   }, [canStartConnection, cursorSwellEnabled, cursorSwellSides])
 
   useEffect(() => {
-    if (!cursorSwellEnabled || !canReceiveConnection) {
+    if (!cursorSwellEnabled) {
       resetPointerTrackingRef.current()
       return
     }
+    /*
+     * Nothing to reset on this exit: the tracker is shared with this card's own
+     * hover, a separate capability, and clearing it would undo the layout
+     * effect's `:hover` bootstrap for a card that mounted under the pointer.
+     */
+    if (!canReceiveConnection) return
 
     /*
      * A connection drag captures the pointer on the origin card's handle, so

packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx

@@ -64,12 +64,8 @@ const TAB_LENGTH_HEADER_ONLY_PX = 10
 /** The error knob is deliberately the shortest of the connection knobs — it is
  *  a secondary output, and a full-length tab crowds the card's bottom corner. */
 const TAB_HEIGHT_RATIO = 0.5
-/**
- * Cursor-swell sides for a card that takes no input. Matching the subflow
- * start node, only the source edge may swell, so a trigger never raises a knob
- * on the edge where every other card shows its input.
- */
-const SOURCE_ONLY_CURSOR_SIDES = ['right'] as const
+const DEFAULT_TARGET_SIDE: WorkflowConnectionSide = 'left'
+const DEFAULT_SOURCE_SIDE: WorkflowConnectionSide = 'right'
 const CARD_CORNER_RADIUS_PX = 16
 const CORNER_SLACK_PX = 4
 const ACTION_MENU_RIGHT_INSET_PX = 24
@@ -747,16 +743,14 @@ export function WorkflowBlockView({
   const rowTabLength = clampTabLength(
     branchRowCount <= 2 ? TAB_LENGTH_SMALL_PX : TAB_LENGTH_SMALL_PX - (branchRowCount - 2) * 2
   )
-  const defaultTargetSide: WorkflowConnectionSide = 'left'
-  const defaultSourceSide: WorkflowConnectionSide = 'right'
   const borderPorts = useMemo<WorkflowBorderPort[]>(() => {
     const ports: WorkflowBorderPort[] = []
     if (shouldShowDefaultHandles) {
       ports.push({
         id: WORKFLOW_TARGET_HANDLE_ID,
-        side: defaultTargetSide,
+        side: DEFAULT_TARGET_SIDE,
         position: 'center',
-        plateau: mainTabLength(defaultTargetSide),
+        plateau: mainTabLength(DEFAULT_TARGET_SIDE),
         color: tabFill(WORKFLOW_TARGET_HANDLE_ID),
       })
     }
@@ -786,9 +780,9 @@ export function WorkflowBlockView({
     } else if (type !== 'response') {
       ports.push({
         id: WORKFLOW_SOURCE_HANDLE_ID,
-        side: defaultSourceSide,
+        side: DEFAULT_SOURCE_SIDE,
         position: 'center',
-        plateau: mainTabLength(defaultSourceSide),
+        plateau: mainTabLength(DEFAULT_SOURCE_SIDE),
         color: tabFill(WORKFLOW_SOURCE_HANDLE_ID),
       })
     }
@@ -811,8 +805,6 @@ export function WorkflowBlockView({
     conditionRows,
     actionMenuSwellOpen,
     actionMenuWidth,
-    defaultSourceSide,
-    defaultTargetSide,
     highlightedHandles,
     routerRows,
     rowTabLength,
@@ -880,7 +872,6 @@ export function WorkflowBlockView({
           }
           isSelected={usesSelectedVisuals}
           height={blockHeight}
-          cursorSwellSides={shouldShowDefaultHandles ? undefined : SOURCE_ONLY_CURSOR_SIDES}
           canStartConnection={supportsCursorHandle}
           canReceiveConnection={shouldShowDefaultHandles}
           onCursorHandleChange={supportsCursorHandle ? onCursorHandleChange : undefined}