@tldiagram/core-ui 1.93.0 → 1.94.1

package/src/pages/ViewEditor/hooks/useCanvasInteractions.ts

@@ -129,6 +129,12 @@ export function applyNodeChangesWithStructuralSharing(changes: NodeChange[], nod
   return didChange ? nextNodes : nodes
 }
 
+export function getConnectorDeletionTarget(
+  selectedConnector: Connector | null,
+) {
+  return selectedConnector?.id ?? null
+}
+
 interface CanvasInteractionOptions {
   viewId: number | null
   canEdit: boolean
@@ -164,12 +170,11 @@ interface CanvasInteractionOptions {
   openConnectorPanel: () => void
   closeConnectorPanel: () => void
   selectedElement: LibraryElement | null
-  selectedEdgeId: number | null
+  selectedConnector: Connector | null
   connectors: Connector[]
   layers: ViewLayer[]
   setSelectedElement: React.Dispatch<React.SetStateAction<LibraryElement | null>>
   setSelectedEdge: (e: Connector | null) => void
-  setSelectedEdgeId: (id: number | null) => void
   setSelectedProxyConnectorDetails: React.Dispatch<React.SetStateAction<import('../../../crossBranch/types').ProxyConnectorDetails | null>>
   openProxyConnectorPanel: () => void
   closeProxyConnectorPanel: () => void
@@ -202,6 +207,12 @@ type HandleReconnectDragState = {
   hoveredHandleId?: string
 }
 
+type InteractionStartOptions = {
+  sourceHandle?: string
+  clientX?: number
+  clientY?: number
+}
+
 export function useCanvasInteractions({
   viewId,
   canEdit,
@@ -237,12 +248,11 @@ export function useCanvasInteractions({
   openConnectorPanel: openConnectorPanel,
   closeConnectorPanel: closeConnectorPanel,
   selectedElement,
-  selectedEdgeId,
+  selectedConnector,
   connectors,
   layers,
   setSelectedElement,
   setSelectedEdge,
-  setSelectedEdgeId,
   setSelectedProxyConnectorDetails,
   openProxyConnectorPanel,
   closeProxyConnectorPanel,
@@ -288,6 +298,7 @@ export function useCanvasInteractions({
   const suppressNextPaneClickRef = useRef(false)
   const longPressCanvasRef = useRef<{ timer: ReturnType<typeof setTimeout>; clientX: number; clientY: number } | null>(null)
   const pendingConnectionSourceRef = useRef(pendingConnectionSource)
+  const pendingConnectionSourceHandleRef = useRef<string | null>(null)
   pendingConnectionSourceRef.current = pendingConnectionSource
   const clickConnectModeRef = useRef(clickConnectMode)
   clickConnectModeRef.current = clickConnectMode
@@ -323,6 +334,12 @@ export function useCanvasInteractions({
     isReconnectingRef.current = false
   }, [clearHandleReconnectListeners])
 
+  const finalizeConnectorCreate = useCallback(async (connector: Connector) => {
+    upsertConnectorGraphSnapshot(connector)
+    upsertConnector(connector)
+    await refreshElements()
+  }, [refreshElements, upsertConnector])
+
   // ── Ref-forwarded callbacks ────────────────────────────────────────────────
   const openConnectorPanelRef = useRef(openConnectorPanel)
   openConnectorPanelRef.current = openConnectorPanel
@@ -372,8 +389,10 @@ export function useCanvasInteractions({
     if (!canEdit || viewId === null || !addingElementAt || addingElementAt.mode !== 'add') return
     const { flowX, flowY } = addingElementAt
     const sourceId = pendingConnectionSourceRef.current
+    const pendingSourceHandle = pendingConnectionSourceHandleRef.current
     setAddingElementAt(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     try {
       const obj = await api.elements.create({ name, kind: '' })
       await api.workspace.views.placements.add(viewId, obj.id, flowX - 100, flowY - 40)
@@ -387,21 +406,22 @@ export function useCanvasInteractions({
           : { sourceHandle: 'right', targetHandle: 'left' }
         const newConnector = await api.workspace.connectors.create(viewId, {
           source_element_id: sourceId, target_element_id: obj.id,
-          source_handle: sourceHandle, target_handle: targetHandle, direction: 'forward',
+          source_handle: pendingSourceHandle ?? sourceHandle, target_handle: targetHandle, direction: 'forward',
         })
         const connector = connectorToConnector(newConnector)
-        upsertConnectorGraphSnapshot(connector)
-        upsertConnector(connector)
+        await finalizeConnectorCreate(connector)
       }
     } catch { /* intentionally empty */ }
-  }, [canEdit, viewId, addingElementAt, refreshElements, rfNodesRef, upsertConnector, viewElementsRef])
+  }, [addingElementAt, canEdit, finalizeConnectorCreate, refreshElements, rfNodesRef, viewId, viewElementsRef])
 
   const handleConfirmExistingElement = useCallback(async (obj: LibraryElement) => {
     if (!canEdit || viewId === null || !addingElementAt || addingElementAt.mode !== 'add') return
     const { flowX, flowY } = addingElementAt
     const sourceId = pendingConnectionSourceRef.current
+    const pendingSourceHandle = pendingConnectionSourceHandleRef.current
     setAddingElementAt(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     try {
       if (!existingElementIds.has(obj.id)) {
         await api.workspace.views.placements.add(viewId, obj.id, flowX - 100, flowY - 40)
@@ -419,21 +439,22 @@ export function useCanvasInteractions({
             : { sourceHandle: 'right', targetHandle: 'left' }
         const newConnector = await api.workspace.connectors.create(viewId, {
           source_element_id: sourceId, target_element_id: obj.id,
-          source_handle: sourceHandle, target_handle: targetHandle, direction: 'forward',
+          source_handle: pendingSourceHandle ?? sourceHandle, target_handle: targetHandle, direction: 'forward',
         })
         const connector = connectorToConnector(newConnector)
-        upsertConnectorGraphSnapshot(connector)
-        upsertConnector(connector)
+        await finalizeConnectorCreate(connector)
       }
     } catch { /* intentionally empty */ }
-  }, [canEdit, viewId, addingElementAt, existingElementIds, refreshElements, rfNodesRef, upsertConnector, viewElementsRef])
+  }, [addingElementAt, canEdit, existingElementIds, finalizeConnectorCreate, refreshElements, rfNodesRef, viewId, viewElementsRef])
 
   const handleConfirmConnectExistingElement = useCallback(async (obj: LibraryElement) => {
     if (!canEdit || viewId === null || !addingElementAt || addingElementAt.mode !== 'connect') return
     const { flowX, flowY } = addingElementAt
     const sourceId = pendingConnectionSourceRef.current
+    const pendingSourceHandle = pendingConnectionSourceHandleRef.current
     setAddingElementAt(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     if (sourceId == null || sourceId === obj.id) return
     try {
       const sourceNode = rfNodesRef.current.find((n) => n.id === String(sourceId))
@@ -443,15 +464,14 @@ export function useCanvasInteractions({
       const newConnector = await api.workspace.connectors.create(viewId, {
         source_element_id: sourceId,
         target_element_id: obj.id,
-        source_handle: sourceHandle,
+        source_handle: pendingSourceHandle ?? sourceHandle,
         target_handle: targetHandle,
         direction: 'forward',
       })
       const connector = connectorToConnector(newConnector)
-      upsertConnectorGraphSnapshot(connector)
-      upsertConnector(connector)
+      await finalizeConnectorCreate(connector)
     } catch { /* intentionally empty */ }
-  }, [addingElementAt, canEdit, rfNodesRef, upsertConnector, viewId])
+  }, [addingElementAt, canEdit, finalizeConnectorCreate, rfNodesRef, viewId])
 
   // ── Zoom-in / zoom-out stable callbacks ───────────────────────────────────
   const stableOnZoomIn = useCallback(async (elementId: number) => {
@@ -541,9 +561,86 @@ export function useCanvasInteractions({
       removeElementPlacement(elementId)
       handleElementDeleted(elementId)
       setInteractionSourceId(null)
+      pendingConnectionSourceHandleRef.current = null
     } catch { /* intentionally empty */ }
   }, [canEdit, viewId, removeElementPlacement, handleElementDeleted])
 
+  const connectClickModeToHandle = useCallback(async (targetElementId: number, targetHandle: string) => {
+    if (!canEdit) return
+    const cid = viewIdRef.current
+    const sourceElementId = interactionSourceIdRef.current
+    if (cid === null || sourceElementId === null || sourceElementId === targetElementId) return
+
+    const sourceHandle = pendingConnectionSourceHandleRef.current ??
+      (clickConnectModeRef.current?.sourceHandle
+        ? getLogicalHandleId(clickConnectModeRef.current.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
+        : DEFAULT_SOURCE_HANDLE_SIDE)
+    const logicalTargetHandle = getLogicalHandleId(targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? DEFAULT_TARGET_HANDLE_SIDE
+
+    setInteractionSourceId(null)
+    setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
+    setClickConnectMode(null)
+    setClickConnectCursorPos(null)
+    setConnectGhostPos(null)
+
+    try {
+      const newConnector = await api.workspace.connectors.create(cid, {
+        source_element_id: sourceElementId,
+        target_element_id: targetElementId,
+        source_handle: sourceHandle,
+        target_handle: logicalTargetHandle,
+        direction: 'forward',
+      })
+      const connector = connectorToConnector(newConnector)
+      await finalizeConnectorCreate(connector)
+    } catch { /* intentionally empty */ }
+  }, [canEdit, finalizeConnectorCreate, interactionSourceIdRef, viewIdRef])
+
+  const stableOnInteractionStart = useCallback((elementId: number, options?: InteractionStartOptions) => {
+    if (!canEdit) return
+    const sourceHandle = options?.sourceHandle
+
+    if (sourceHandle) {
+      const cursorPos = options?.clientX !== undefined && options.clientY !== undefined
+        ? { x: options.clientX, y: options.clientY }
+        : lastMousePosRef.current
+          ? { x: lastMousePosRef.current.clientX, y: lastMousePosRef.current.clientY }
+          : null
+      if (!cursorPos) return
+
+      const activeSourceId = interactionSourceIdRef.current
+      if (activeSourceId !== null && activeSourceId !== elementId) {
+        void connectClickModeToHandle(elementId, sourceHandle)
+        return
+      }
+
+      pendingConnectionSourceHandleRef.current = getLogicalHandleId(sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
+      setInteractionSourceId(elementId)
+      setPendingConnectionSource(null)
+      setAddingElementAt(null)
+      setClickConnectMode({
+        sourceNodeId: String(elementId),
+        sourceHandle: ensureVisualHandleId(sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? sourceHandle,
+      })
+      setClickConnectCursorPos(cursorPos)
+      setConnectGhostPos(cursorPos)
+      return
+    }
+
+    const isCancelling = interactionSourceIdRef.current === elementId
+    const nextSourceId = isCancelling ? null : elementId
+
+    if (isCancelling) pendingConnectionSourceHandleRef.current = null
+    setInteractionSourceId(nextSourceId)
+
+    if (isCancelling) {
+      setClickConnectMode(null)
+      setClickConnectCursorPos(null)
+      setConnectGhostPos(null)
+    }
+  }, [canEdit, connectClickModeToHandle, interactionSourceIdRef])
+
   // ── Node/connector changes ─────────────────────────────────────────────────────
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     if (!canEdit) {
@@ -614,10 +711,9 @@ export function useCanvasInteractions({
         direction: 'forward', style: 'bezier',
       })
       const connector = connectorToConnector(newConnector)
-      upsertConnectorGraphSnapshot(connector)
-      upsertConnector(connector)
+      await finalizeConnectorCreate(connector)
     } catch { /* intentionally empty */ }
-  }, [canEdit, upsertConnector, viewId])
+  }, [canEdit, finalizeConnectorCreate, viewId])
 
   const onConnectStart = useCallback((_: React.MouseEvent | React.TouchEvent, { nodeId }: OnConnectStartParams) => {
     if (!canEdit || isReconnectingRef.current) return
@@ -677,15 +773,14 @@ export function useCanvasInteractions({
         source_handle: sourceHandle, target_handle: targetHandle, direction: 'forward',
       }).then((connector) => {
         const next = connectorToConnector(connector)
-        upsertConnectorGraphSnapshot(next)
-        upsertConnector(next)
+        void finalizeConnectorCreate(next)
       }).catch(() => { /* intentionally empty */ })
     } else {
       setPendingConnectionSource(sourceElementId)
       suppressNextPaneClickRef.current = true
       showAddingElementAt(clientX, clientY, true, 'connect', 'shiftKey' in event && event.shiftKey)
     }
-  }, [canEdit, upsertConnector, showAddingElementAt, rfNodesRef, viewIdRef])
+  }, [canEdit, finalizeConnectorCreate, showAddingElementAt, rfNodesRef, viewIdRef])
 
   // ── Reconnect ──────────────────────────────────────────────────────────────
   const performReconnect = useCallback(async (oldConnector: RFEdge, newConnection: Connection) => {
@@ -695,7 +790,6 @@ export function useCanvasInteractions({
     const targetId = parseNumericId(newConnection.target)
     if (edgeId === null || sourceId === null || targetId === null) return
     setRfEdges((eds) => reconnectEdge(oldConnector, newConnection, eds))
-    setSelectedEdgeId(null)
     try {
       const existingData = oldConnector.data as Connector
       const sourceHandle = getLogicalHandleId(newConnection.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE)
@@ -713,7 +807,7 @@ export function useCanvasInteractions({
       upsertConnectorGraphSnapshot(connector)
       replaceConnector(connector)
     } catch { /* intentionally empty */ }
-  }, [canEdit, replaceConnector, viewId, setRfEdges, setSelectedEdgeId])
+  }, [canEdit, replaceConnector, viewId, setRfEdges])
   const onReconnect = useCallback(async (oldConnector: RFEdge, newConnection: Connection) => {
     await performReconnect(oldConnector, newConnection)
   }, [performReconnect])
@@ -904,7 +998,6 @@ export function useCanvasInteractions({
       setSelectedElement(null)
       closeElementPanel()
       setSelectedEdge(null)
-      setSelectedEdgeId(null)
       closeConnectorPanel()
       setSelectedProxyConnectorDetails((rfConnector.data as { details?: import('../../../crossBranch/types').ProxyConnectorDetails }).details ?? null)
       openProxyConnectorPanel()
@@ -912,16 +1005,14 @@ export function useCanvasInteractions({
     }
     const clickedId = parseNumericId(rfConnector.id)
     if (clickedId === null) return
-    if (selectedEdgeId === clickedId) {
-      const connector = connectors.find((e) => e.id === clickedId)
-      if (connector) { setSelectedEdge(connector); openConnectorPanelRef.current() }
-      setSelectedEdgeId(null)
-    } else {
-      setSelectedElement(null)
-      closeElementPanel()
-      setSelectedEdgeId(clickedId)
-    }
-  }, [closeConnectorPanel, closeElementPanel, connectors, openProxyConnectorPanel, selectedEdgeId, setSelectedEdge, setSelectedEdgeId, setSelectedElement, setSelectedProxyConnectorDetails])
+    const connector = connectors.find((e) => e.id === clickedId)
+    if (!connector) return
+    setSelectedElement(null)
+    closeElementPanel()
+    setSelectedProxyConnectorDetails(null)
+    setSelectedEdge(connector)
+    openConnectorPanelRef.current()
+  }, [closeElementPanel, connectors, openProxyConnectorPanel, setSelectedEdge, setSelectedElement, setSelectedProxyConnectorDetails])
 
   // ── Pane interactions ─────────────────────────────────────────────────────
   const onPaneClick = useCallback((e: React.MouseEvent) => {
@@ -930,7 +1021,6 @@ export function useCanvasInteractions({
     setReconnectPicking(null)
     setSelectedElement(null)
     setSelectedEdge(null)
-    setSelectedEdgeId(null)
     setSelectedProxyConnectorDetails(null)
     setConnectorLongPressMenu(null)
     setCanvasMenu(null)
@@ -953,14 +1043,18 @@ export function useCanvasInteractions({
       } else {
         setInteractionSourceId(null)
         setPendingConnectionSource(sourceId)
+        pendingConnectionSourceHandleRef.current = clickConnectModeRef.current?.sourceHandle
+          ? getLogicalHandleId(clickConnectModeRef.current.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
+          : pendingConnectionSourceHandleRef.current
         showAddingElementAt(e.clientX, e.clientY, true, 'connect', e.shiftKey)
       }
       return
     }
     setInteractionSourceId(null)
     setPendingConnectionSource(null)
+    pendingConnectionSourceHandleRef.current = null
     setAddingElementAt(null)
-  }, [stableOnConnectTo, showAddingElementAt, closeElementPanel, closeConnectorPanel, closeProxyConnectorPanel, rfNodesRef, interactionSourceIdRef, setSelectedElement, setSelectedEdge, setSelectedEdgeId, setSelectedProxyConnectorDetails])
+  }, [stableOnConnectTo, showAddingElementAt, closeElementPanel, closeConnectorPanel, closeProxyConnectorPanel, rfNodesRef, interactionSourceIdRef, setSelectedElement, setSelectedEdge, setSelectedProxyConnectorDetails])
 
   const onPaneContextMenu = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
@@ -1124,10 +1218,12 @@ export function useCanvasInteractions({
             setSelectedElement(null)
             closeElementPanel()
           }
-        } else if (selectedEdgeId) {
-          api.workspace.connectors.delete('', selectedEdgeId).then(() => {
-            handleConnectorDeleted(selectedEdgeId)
-            setSelectedEdgeId(null)
+        } else {
+          const connectorId = getConnectorDeletionTarget(selectedConnector)
+          if (connectorId === null) return
+          api.workspace.connectors.delete('', connectorId).then(() => {
+            handleConnectorDeleted(connectorId)
+            setSelectedEdge(null)
             closeConnectorPanel()
           }).catch(() => { /* intentionally empty */ })
         }
@@ -1236,7 +1332,7 @@ export function useCanvasInteractions({
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [canEdit, refreshGrid, selectedElement, selectedEdgeId, viewId, stableOnRemoveElement, handleConnectorDeleted, handleElementPermanentlyDeleted,  closeElementPanel, closeConnectorPanel, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, rfNodesRef, viewElementsRef, setLinksMap, showAddingElementAt, setSelectedElement, setSelectedEdge, setSelectedEdgeId, containerRef, linksMapRef])
+  }, [canEdit, refreshGrid, selectedElement, selectedConnector, viewId, stableOnRemoveElement, handleConnectorDeleted, handleElementPermanentlyDeleted,  closeElementPanel, closeConnectorPanel, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, rfNodesRef, viewElementsRef, setLinksMap, showAddingElementAt, setSelectedElement, setSelectedEdge, containerRef, linksMapRef])
 
   // ── DnD handlers ──────────────────────────────────────────────────────────
   const onDragOver = useCallback((e: React.DragEvent) => {
@@ -1351,6 +1447,7 @@ export function useCanvasInteractions({
     stableOnHoverZoom,
     stableOnRemoveElement,
     stableOnConnectTo,
+    stableOnInteractionStart,
     stableOnStartHandleReconnect,
     showAddingElementAt,
     // RF event handlers

package/src/pages/ViewEditor/hooks/useViewData.ts

@@ -23,7 +23,7 @@ interface ViewDataOptions {
   viewId: number | null
   interactionSourceId: number | null
   clickConnectMode: { sourceNodeId: string; sourceHandle: string; targetHandle?: string } | null
-  selectedEdgeId: number | null
+  selectedConnector: Connector | null
   activeTags: string[]
   hiddenLayerTags: string[]
   hoveredLayerTags: string[] | null
@@ -35,7 +35,7 @@ interface ViewDataOptions {
   stableOnNavigateToView: (id: number) => void
   stableOnSelect: (obj: PlacedElement) => void
   stableOnOpenCodePreview: (elementId: number) => void
-  stableOnInteractionStart: (elementId: number) => void
+  stableOnInteractionStart: (elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => void
   stableOnConnectTo: (targetElementId: number) => Promise<void>
   stableOnStartHandleReconnect: (args: { edgeId: string; endpoint: 'source' | 'target'; handleId: string; clientX: number; clientY: number }) => void
   stableOnRemoveElement: (elementId: number) => Promise<void>
@@ -152,7 +152,7 @@ export function useViewData({
   viewId,
   interactionSourceId,
   clickConnectMode,
-  selectedEdgeId,
+  selectedConnector,
   activeTags,
   hiddenLayerTags,
   hoveredLayerTags,
@@ -170,6 +170,7 @@ export function useViewData({
   stableOnHoverZoom,
   hoveredZoomRef,
 }: ViewDataOptions) {
+  const selectedEdgeId = selectedConnector?.id ?? null
   const queryClient = useQueryClient()
   const view = useStore((state) => state.view)
   const setView = useStore((state) => state.setView)

package/src/pages/ViewEditor/index.tsx

@@ -85,7 +85,7 @@ import { useCrossBranchContextSettings } from '../../crossBranch/settings'
 import { removeConnectorGraphSnapshot, upsertConnectorGraphSnapshot, useWorkspaceGraphSnapshot } from '../../crossBranch/store'
 import type { ProxyConnectorDetails } from '../../crossBranch/types'
 import { useDemoRevealViewport, type ViewEditorDemoOptions } from '../../demo/viewEditor'
-import { useStore } from '../../store/useStore'
+import { buildElementLibraryItems, useStore } from '../../store/useStore'
 
 const nodeTypes = {
   elementNode: ElementNode,
@@ -201,10 +201,8 @@ function ViewEditorInner({
   const closeImportModalRef = useRef(importModal.onClose)
   closeImportModalRef.current = importModal.onClose
 
-
   const [selectedElement, setSelectedElement] = useState<WorkspaceElement | null>(null)
   const [selectedEdge, setSelectedEdge] = useState<Connector | null>(null)
-  const [selectedEdgeId, setSelectedEdgeId] = useState<number | null>(null)
   const [selectedProxyConnectorDetails, setSelectedProxyConnectorDetails] = useState<ProxyConnectorDetails | null>(null)
   const [previewElement, setPreviewElement] = useState<PlacedElement | null>(null)
   const [libraryOpen, setLibraryOpen] = useState(() => {
@@ -228,6 +226,7 @@ function ViewEditorInner({
   const setStoreSnapToGrid = useStore((state) => state.setSnapToGrid)
   const upsertStoreConnector = useStore((state) => state.upsertConnector)
   const removeStoreConnector = useStore((state) => state.removeConnector)
+  const refreshElementsRef = useRef<() => Promise<void>>(async () => {})
   const setSnapToGrid = useCallback((snap: boolean) => {
     setStoreSnapToGrid(snap)
     if (typeof window !== 'undefined') localStorage.setItem('diag:snapToGrid', String(snap))
@@ -348,6 +347,7 @@ function ViewEditorInner({
 
   // stableOnConnectTo is wired after canvasInteractions is declared
   const stableOnConnectToRef = useRef<(targetElementId: number) => Promise<void>>(async () => { })
+  const stableOnInteractionStartRef = useRef<(elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => void>(() => { })
   const stableOnStartHandleReconnectRef = useRef<(args: { edgeId: string; endpoint: 'source' | 'target'; handleId: string; clientX: number; clientY: number }) => void>(() => { })
 
   // ── Drawing engine ────────────────────────────────────────────────────────
@@ -370,7 +370,7 @@ function ViewEditorInner({
     viewId,
     interactionSourceId: interactionSourceIdRef.current,
     clickConnectMode: null, // wired after canvasInteractions
-    selectedEdgeId,
+    selectedConnector: selectedEdge,
     activeTags,
     hiddenLayerTags,
     hoveredLayerTags,
@@ -381,7 +381,6 @@ function ViewEditorInner({
     stableOnNavigateToView: useCallback((id: number) => { stableOnNavigateToViewRef.current(id) }, []),
     stableOnSelect: useCallback((obj: PlacedElement) => {
       setSelectedEdge(null)
-      setSelectedEdgeId(null)
       setSelectedProxyConnectorDetails(null)
       closeProxyConnectorPanelRef.current()
       closeConnectorPanelRef.current()
@@ -401,10 +400,9 @@ function ViewEditorInner({
         openCodePreviewRef.current()
       }
     }, []),
-    stableOnInteractionStart: useCallback((elementId: number) => {
-      if (!canEdit) return
-      interactionSourceIdRef.current = interactionSourceIdRef.current === elementId ? null : elementId
-    }, [canEdit]),
+    stableOnInteractionStart: useCallback((elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => {
+      stableOnInteractionStartRef.current(elementId, options)
+    }, []),
     stableOnConnectTo: useCallback(async (targetElementId: number) => {
       await stableOnConnectToRef.current(targetElementId)
     }, []),
@@ -432,6 +430,7 @@ function ViewEditorInner({
     handleElementDeleted, handleElementPermanentlyDeleted, handleElementSaved,
     setAllElements: _setAllElements,
   } = data
+  refreshElementsRef.current = refreshElements
 
   const tagCounts = useMemo(() => {
     const counts: Record<string, number> = {}
@@ -499,27 +498,7 @@ function ViewEditorInner({
     return unsub
   }, [fitView, viewId, refreshElements])
 
-  const existingElements = useMemo(() => {
-    return viewElements.map(obj => ({
-      id: obj.element_id,
-      name: obj.name,
-      kind: obj.kind,
-      description: obj.description,
-      technology: obj.technology,
-      url: obj.url,
-      logo_url: obj.logo_url,
-      technology_connectors: obj.technology_connectors,
-      tags: obj.tags,
-      repo: obj.repo,
-      branch: obj.branch,
-      file_path: obj.file_path,
-      language: obj.language,
-      created_at: '',
-      updated_at: '',
-      has_view: false,
-      view_label: null,
-    } as WorkspaceElement))
-  }, [viewElements])
+  const existingElements = useMemo(() => buildElementLibraryItems(allElements, viewElements), [allElements, viewElements])
 
   const availableTags = useMemo(() => {
     const tags = new Set<string>()
@@ -551,7 +530,6 @@ function ViewEditorInner({
     const match = viewElements.find((element) => element.element_id === requestedElementId)
     if (!match) return
     setSelectedEdge(null)
-    setSelectedEdgeId(null)
     setSelectedProxyConnectorDetails(null)
     closeConnectorPanelRef.current()
     closeProxyConnectorPanelRef.current()
@@ -654,10 +632,10 @@ function ViewEditorInner({
     closeElementPanel: useCallback(() => closeElementPanelRef.current(), []),
     openConnectorPanel: useCallback(() => openConnectorPanelRef.current(), []),
     closeConnectorPanel: useCallback(() => closeConnectorPanelRef.current(), []),
-    selectedElement, selectedEdgeId, connectors,
+    selectedElement, selectedConnector: selectedEdge, connectors,
     layers,
     setSelectedElement,
-    setSelectedEdge, setSelectedEdgeId,
+    setSelectedEdge,
     setSelectedProxyConnectorDetails,
     openProxyConnectorPanel: useCallback(() => openProxyConnectorPanelRef.current(), []),
     closeProxyConnectorPanel: useCallback(() => closeProxyConnectorPanelRef.current(), []),
@@ -665,6 +643,7 @@ function ViewEditorInner({
     handleConnectorDeleted: useCallback((edgeId: number) => {
       if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
       removeStoreConnector(edgeId)
+      void refreshElementsRef.current()
     }, [removeStoreConnector, viewId]),
     handleUpdateTags,
     drawingCanvasRef,
@@ -678,8 +657,9 @@ function ViewEditorInner({
     stableOnNavigateToViewRef.current = canvas.stableOnNavigateToView
     stableOnRemoveElementRef.current = canvas.stableOnRemoveElement
     stableOnConnectToRef.current = canvas.stableOnConnectTo
+    stableOnInteractionStartRef.current = canvas.stableOnInteractionStart
     stableOnStartHandleReconnectRef.current = canvas.stableOnStartHandleReconnect
-  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnStartHandleReconnect])
+  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect])
   const viewName = view?.name ?? null
 
   const [expandedAncestorGroups, setExpandedAncestorGroups] = useState<Set<string>>(new Set())
@@ -702,7 +682,6 @@ function ViewEditorInner({
     onSelectProxyDetails: useCallback((details: ProxyConnectorDetails) => {
       setSelectedElement(null)
       setSelectedEdge(null)
-      setSelectedEdgeId(null)
       closeConnectorPanelRef.current()
       closeElementPanelRef.current()
       setSelectedProxyConnectorDetails(details)
@@ -915,7 +894,7 @@ function ViewEditorInner({
     return () => observer.disconnect()
   }, [maybeFitView])
 
-  useEffect(() => { setRfNodes([]); setRfEdges([]); needsFitView.current = true }, [viewId, setRfEdges, setRfNodes])
+  useEffect(() => { needsFitView.current = true }, [viewId])
 
   // ── Dynamic viewport bounds ────────────────────────────────────────────────
   useEffect(() => {
@@ -1023,10 +1002,15 @@ function ViewEditorInner({
     upsertConnectorGraphSnapshot(updated)
     upsertStoreConnector(updated)
   }, [upsertStoreConnector])
-  const handleConnectorDeleteInPanel = useCallback((edgeId: number) => {
+  const handleConnectorDeleted = useCallback((edgeId: number) => {
     if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
     removeStoreConnector(edgeId)
-  }, [removeStoreConnector, viewId])
+    void refreshElements()
+  }, [refreshElements, removeStoreConnector, viewId])
+  const handleConnectorDeleteInPanel = useCallback((edgeId: number) => {
+    handleConnectorDeleted(edgeId)
+    setSelectedEdge(null)
+  }, [handleConnectorDeleted, setSelectedEdge])
   const handleViewSave = useCallback((updated: ViewTreeNode) => setView(updated), [setView])
 
   // ── Library helpers ────────────────────────────────────────────────────────
@@ -1419,8 +1403,8 @@ function ViewEditorInner({
           onSave={handleConnectorSave} autoSave
           onDelete={handleConnectorDeleteInPanel}
           hasBackdrop={isMobileLayout}
-          connectorPanelAfterContentSlot={connectorPanelAfterContentSlot}
-        />
+              connectorPanelAfterContentSlot={connectorPanelAfterContentSlot}
+          />
         <ProxyConnectorPanel
           isOpen={proxyConnectorPanel.isOpen}
           onClose={proxyConnectorPanel.onClose}