@tldiagram/core-ui 1.93.0 → 1.94.1

package/dist/pages/InfiniteZoom.d.ts

@@ -2,6 +2,9 @@ interface Props {
     sharedToken?: string;
     shareSlot?: React.ReactNode;
 }
-export default function InfiniteZoom(props: Props): import("react/jsx-runtime").JSX.Element;
+export interface InfiniteZoomHandle {
+    focusDiagram(viewId: number): boolean;
+}
+declare const InfiniteZoom: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<InfiniteZoomHandle>>;
+export default InfiniteZoom;
 export declare function SharedInfiniteZoom(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.d.ts

@@ -2,6 +2,7 @@ import type { DrawingCanvasHandle } from '../../../components/DrawingCanvas';
 import { type Connection, type Edge as RFEdge, type EdgeChange, type Node as RFNode, type NodeChange, type NodeDragHandler, type OnConnect, type OnConnectStartParams } from 'reactflow';
 import type { Connector, PlacedElement, ViewTreeNode, LibraryElement, ViewLayer, ViewConnector, IncomingViewConnector } from '../../../types';
 export declare function applyNodeChangesWithStructuralSharing(changes: NodeChange[], nodes: RFNode[]): RFNode[];
+export declare function getConnectorDeletionTarget(selectedConnector: Connector | null): number | null;
 interface CanvasInteractionOptions {
     viewId: number | null;
     canEdit: boolean;
@@ -42,12 +43,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;
@@ -80,7 +80,12 @@ type HandleReconnectDragState = {
     hoveredNodeId?: string;
     hoveredHandleId?: string;
 };
-export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements: _setViewElements, setConnectors: _setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedEdgeId, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedEdgeId, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
+type InteractionStartOptions = {
+    sourceHandle?: string;
+    clientX?: number;
+    clientY?: number;
+};
+export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements: _setViewElements, setConnectors: _setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedConnector, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
     canvasMenu: {
         x: number;
         y: number;
@@ -155,6 +160,7 @@ export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _d
     stableOnHoverZoom: (elementId: number, type: "in" | "out" | null) => void;
     stableOnRemoveElement: (elementId: number) => Promise<void>;
     stableOnConnectTo: (targetElementId: number) => Promise<void>;
+    stableOnInteractionStart: (elementId: number, options?: InteractionStartOptions) => void;
     stableOnStartHandleReconnect: (args: {
         edgeId: string;
         endpoint: "source" | "target";

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/pages/ViewEditor/hooks/useViewData.d.ts

@@ -7,7 +7,7 @@ interface ViewDataOptions {
         sourceHandle: string;
         targetHandle?: string;
     } | null;
-    selectedEdgeId: number | null;
+    selectedConnector: Connector | null;
     activeTags: string[];
     hiddenLayerTags: string[];
     hoveredLayerTags: string[] | null;
@@ -18,7 +18,11 @@ 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;
@@ -34,7 +38,7 @@ interface ViewDataOptions {
         type: 'in' | 'out' | null;
     } | null>;
 }
-export declare function useViewData({ viewId, interactionSourceId, clickConnectMode, selectedEdgeId, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors, stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect, stableOnOpenCodePreview, stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom, hoveredZoomRef, }: ViewDataOptions): {
+export declare function useViewData({ viewId, interactionSourceId, clickConnectMode, selectedConnector, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors, stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect, stableOnOpenCodePreview, stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom, hoveredZoomRef, }: ViewDataOptions): {
     view: ViewTreeNode | null | undefined;
     setView: (view: ViewTreeNode | null | undefined) => void;
     viewElements: PlacedElement[];

package/dist/pages/ViewsGrid.d.ts

@@ -1,6 +1,14 @@
+import { type Dispatch, type SetStateAction } from 'react';
 import 'reactflow/dist/style.css';
+import type { ViewTreeNode } from '../types';
 interface Props {
     onShare?: (viewId: number) => void;
+    treeData: ViewTreeNode[];
+    loading: boolean;
+    focusedId: number | null;
+    onFocusChange: (viewId: number | null) => void;
+    setTreeData: Dispatch<SetStateAction<ViewTreeNode[]>>;
+    refreshTree: () => Promise<void>;
 }
-export default function ViewsGrid({ onShare }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ViewsGrid(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/store/useStore.d.ts

@@ -67,6 +67,8 @@ export declare function selectElementById(state: Pick<CanvasStoreState, 'viewEle
 export declare function selectConnectorById(state: Pick<CanvasStoreState, 'connectors'>, connectorId: number): Connector | undefined;
 export declare function updatePlacedElementPosition(elements: PlacedElement[], elementId: number, x: number, y: number): PlacedElement[];
 export declare function removePlacedElement(elements: PlacedElement[], elementId: number): PlacedElement[];
+export declare function placedElementToLibraryElement(element: PlacedElement): LibraryElement;
+export declare function buildElementLibraryItems(allElements: LibraryElement[], viewElements: PlacedElement[]): LibraryElement[];
 export declare function mergeSavedElementIntoPlacements(elements: PlacedElement[], saved: LibraryElement): PlacedElement[];
 export declare function upsertConnectorInList(connectors: Connector[], connector: Connector): Connector[];
 export declare function removeConnectorFromList(connectors: Connector[], connectorId: number): Connector[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.93.0",
+  "version": "1.94.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -38,7 +38,6 @@
   "dependencies": {
     "@buf/tldiagramcom_diagram.bufbuild_es": "^2.11.0-20260419172603-8192c519478e.1",
     "@bufbuild/protobuf": "^2.11.0",
-    "@tanstack/react-query": "^5.100.1",
     "esbuild": "^0.25.12",
     "zustand": "^5.0.12"
   },
@@ -59,6 +58,7 @@
     "@connectrpc/connect-web": "^2.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@tanstack/react-query": "^5.100.1",
     "@uiw/react-codemirror": "^4.25.8",
     "d3-force": "^3.0.0",
     "dagre": "^0.8.5",
@@ -67,7 +67,7 @@
     "mermaid-ast": "^0.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.1",
+    "react-router-dom": "^6.30.3",
     "reactflow": "^11.11.4",
     "web-tree-sitter": "0.21.0"
   },
@@ -126,6 +126,7 @@
     "@connectrpc/connect-web": "^2.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@tanstack/react-query": "^5.100.1",
     "@eslint/js": "^9.0.0",
     "@types/dagre": "^0.7.54",
     "@types/react": "^18.3.12",
@@ -143,11 +144,11 @@
     "mermaid-ast": "^0.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.1",
+    "react-router-dom": "^6.30.3",
     "reactflow": "^11.11.4",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.0.0",
-    "vite": "^6.0.3",
+    "vite": "^6.4.2",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.2",
     "web-tree-sitter": "^0.21.0"

package/src/components/ElementNode.tsx

@@ -138,7 +138,7 @@ interface NodeData extends PlacedElement {
   onZoomOut: (elementId: number) => void
   onNavigateToDiagram: (viewId: number) => void
   onSelect: (obj: PlacedElement) => void
-  onInteractionStart: (elementId: number) => void
+  onInteractionStart: (elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => void
   onConnectTo: (elementId: number) => void
   onStartHandleReconnect?: (args: { edgeId: string; endpoint: 'source' | 'target'; handleId: string; clientX: number; clientY: number }) => void
   onRemove: (elementId: number) => void
@@ -505,6 +505,15 @@ function ElementNode({ data, selected }: Props) {
                 position={position}
                 id={handleId}
                 className={className}
+                onClick={(e: React.MouseEvent) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  data.onInteractionStart(data.element_id, {
+                    sourceHandle: handleId,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                  })
+                }}
                 style={{
                   ...getVisualHandleStyle(position, slot),
                   background: 'var(--accent)',

package/src/components/ElementPanel.tsx

@@ -491,8 +491,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   const handlePermanentDelete = async () => {
     if (isReadOnly || !element) return
     try {
-      if (orgId === undefined) return
-      await api.elements.delete(orgId, element.id)
+      await api.elements.delete(orgId ?? '', element.id)
       onPermanentDelete?.(element.id)
       confirmPermanentDelete.onClose()
       onClose()

package/src/components/LayoutSection.tsx

@@ -16,10 +16,12 @@ import {
   Text,
   VStack,
   Icon,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { ChevronDownIcon, ChevronRightIcon } from './Icons'
 import { api } from '../api/client'
 import type { ViewTreeNode } from '../types'
+import ConfirmDialog from './ConfirmDialog'
 
 type Algorithm = 'dagre' | 'force'
 
@@ -54,6 +56,7 @@ export default function LayoutSection({ view, canEdit }: Props) {
   const [algo, setAlgo] = useState<Algorithm>('dagre')
   const [running, setRunning] = useState(false)
   const [collisionRunning, setCollisionRunning] = useState(false)
+  const adjustConnectorsConfirm = useDisclosure()
 
   const [dagreConfig, setDagreConfig] = useState<DagreConfig>({
     direction: 'TB',
@@ -570,17 +573,17 @@ export default function LayoutSection({ view, canEdit }: Props) {
           </Button>
           {/* Apply button */}
           <VStack spacing={2} w="full">
-            <Button
-              size="sm"
-              w="full"
-              variant="outline"
-              colorScheme="blue"
-              onClick={handleCollisionRemoval}
-              isLoading={collisionRunning}
-              isDisabled={!canEdit || !view}
-              loadingText="Removing Connector Collisions..."
-              fontWeight="bold"
-              fontSize="xs"
+          <Button
+            size="sm"
+            w="full"
+            variant="outline"
+            colorScheme="blue"
+            onClick={adjustConnectorsConfirm.onOpen}
+            isLoading={collisionRunning}
+            isDisabled={!canEdit || !view}
+            loadingText="Removing Connector Collisions..."
+            fontWeight="bold"
+            fontSize="xs"
               letterSpacing="0.05em"
               textTransform="uppercase"
               h="32px"
@@ -594,6 +597,19 @@ export default function LayoutSection({ view, canEdit }: Props) {
 
         </VStack>
       </Collapse>
+      <ConfirmDialog
+        isOpen={adjustConnectorsConfirm.isOpen}
+        onClose={adjustConnectorsConfirm.onClose}
+        onConfirm={() => {
+          adjustConnectorsConfirm.onClose();
+          void handleCollisionRemoval();
+        }}
+        title="Adjust Connectors"
+        body="This action will re-attach existing connectors to form the shortest path between the elements."
+        confirmLabel="Confirm"
+        confirmColorScheme="blue"
+        isLoading={collisionRunning}
+      />
     </Box>
   )
 }

package/src/components/ZUI/ZUICanvas.tsx

@@ -37,6 +37,7 @@ import { buildVisibleProxyConnectors, collectVisibleNodeAnchors, drawVisibleProx
 
 export interface ZUICanvasHandle {
   fitView(): void
+  focusDiagram(viewId: number): boolean
 }
 
 interface Props {
@@ -169,9 +170,78 @@ function getPathAt(
   return []
 }
 
+function findDiagramFocusTarget(groups: DiagramGroupLayout[], viewId: number): PathItem | null {
+  for (const group of groups) {
+    if (group.diagramId === viewId) {
+      return {
+        id: `g-${group.diagramId}`,
+        label: group.label,
+        type: 'group',
+        absX: group.worldX,
+        absY: group.worldY,
+        absW: group.worldW,
+        absH: group.worldH,
+      }
+    }
+
+    const found = findLinkedDiagramInNodes(viewId, group.nodes, 0, 0, 1, 0, 0)
+    if (found) return found
+  }
+  return null
+}
+
+function findLinkedDiagramInNodes(
+  viewId: number,
+  nodes: DiagramGroupLayout['nodes'],
+  parentAbsX: number,
+  parentAbsY: number,
+  parentAbsScale: number,
+  parentChildOffsetX: number,
+  parentChildOffsetY: number,
+): PathItem | null {
+  for (const node of nodes) {
+    const absX = parentAbsX + (node.worldX - parentChildOffsetX) * parentAbsScale
+    const absY = parentAbsY + (node.worldY - parentChildOffsetY) * parentAbsScale
+    const absW = node.worldW * parentAbsScale
+    const absH = node.worldH * parentAbsScale
+
+    if (node.linkedDiagramId === viewId) {
+      return {
+        id: node.id,
+        label: node.linkedDiagramLabel || node.label,
+        type: 'node',
+        isCircular: node.isCircular,
+        absX,
+        absY,
+        absW,
+        absH,
+      }
+    }
+
+    if (node.children.length > 0) {
+      const found = findLinkedDiagramInNodes(
+        viewId,
+        node.children,
+        absX,
+        absY,
+        parentAbsScale * node.childScale,
+        node.childOffsetX,
+        node.childOffsetY,
+      )
+      if (found) return found
+    }
+  }
+  return null
+}
+
+function easeOutQuart(t: number): number {
+  return 1 - Math.pow(1 - t, 4)
+}
+
 export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({ data, onReady, onZoom, onPan, highlightedTags, highlightColor, hiddenTags, crossBranchSettings, hoverLocked = false }, ref) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
+  const cameraTransitionRef = useRef<number | null>(null)
   const [initialized, setInitialized] = useState(false)
   const [containerSize, setContainerSize] = useState({ w: 0, h: 0 })
   const isMobileLayout = useBreakpointValue({ base: true, md: false }) ?? false
@@ -297,6 +367,10 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
 
   const zoomToPathItem = useCallback((item: PathItem) => {
     if (containerSize.w === 0 || containerSize.h === 0) return
+    if (cameraTransitionRef.current !== null) {
+      cancelAnimationFrame(cameraTransitionRef.current)
+      cameraTransitionRef.current = null
+    }
     setHoveredItem(null, true) // Clear popover immediately on breadcrumb jump
 
     // Use a comfortable padding for the focused item
@@ -317,6 +391,68 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     setViewState({ x, y, zoom })
   }, [containerSize, maxZoom, setViewState, setHoveredItem])
 
+  const focusDiagram = useCallback((viewId: number) => {
+    const el = containerRef.current
+    const target = findDiagramFocusTarget(layout.groups, viewId)
+    if (!el || !target) return false
+
+    const canvasW = el.offsetWidth
+    const canvasH = el.offsetHeight
+    if (canvasW === 0 || canvasH === 0) return false
+
+    setHoveredItem(null, true)
+
+    const padding = isMobileLayout ? 0.18 : 0.16
+    const bboxW = Math.max(1, target.absW)
+    const bboxH = Math.max(1, target.absH)
+    const zoom = Math.min(
+      (canvasW * (1 - padding * 2)) / bboxW,
+      (canvasH * (1 - padding * 2)) / bboxH,
+      maxZoom,
+    )
+
+    const x = (canvasW - bboxW * zoom) / 2 - target.absX * zoom
+    const y = (canvasH - bboxH * zoom) / 2 - target.absY * zoom
+
+    if (cameraTransitionRef.current !== null) {
+      cancelAnimationFrame(cameraTransitionRef.current)
+      cameraTransitionRef.current = null
+    }
+
+    const from = viewStateRef.current
+    const to = { x, y, zoom }
+    const duration = 520
+    const startedAt = performance.now()
+
+    const step = (now: number) => {
+      const t = Math.min(1, (now - startedAt) / duration)
+      const eased = easeOutQuart(t)
+      setViewState({
+        x: from.x + (to.x - from.x) * eased,
+        y: from.y + (to.y - from.y) * eased,
+        zoom: from.zoom + (to.zoom - from.zoom) * eased,
+      })
+
+      if (t < 1) {
+        cameraTransitionRef.current = requestAnimationFrame(step)
+      } else {
+        cameraTransitionRef.current = null
+        setViewState(to)
+      }
+    }
+
+    cameraTransitionRef.current = requestAnimationFrame(step)
+    return true
+  }, [isMobileLayout, layout.groups, maxZoom, setHoveredItem, setViewState, viewStateRef])
+
+  useEffect(() => {
+    return () => {
+      if (cameraTransitionRef.current !== null) {
+        cancelAnimationFrame(cameraTransitionRef.current)
+      }
+    }
+  }, [])
+
   // ── Fit view on mount and when layout changes ────────────────────
   useEffect(() => {
     const el = containerRef.current
@@ -345,8 +481,9 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
         setHoveredItem(null, true) // Clear popover immediately on fitView
         fitView(el.offsetWidth, el.offsetHeight, layout.bbox)
       },
+      focusDiagram,
     }),
-    [fitView, layout.bbox, setHoveredItem],
+    [fitView, focusDiagram, layout.bbox, setHoveredItem],
   )
 
   // ── RAF render loop ──────────────────────────────────────────────

package/src/pages/InfiniteZoom.tsx

@@ -1,5 +1,5 @@
 // src/pages/InfiniteZoom.tsx Explore page holds the ZUI feature
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import {
   Box,
@@ -34,10 +34,14 @@ interface Props {
   shareSlot?: React.ReactNode
 }
 
+export interface InfiniteZoomHandle {
+  focusDiagram(viewId: number): boolean
+}
+
 const MINI_ONBOARDING_KEY = 'shared_zoom_onboarding_dismissed'
 
 // ── Inner component ────────────────────────────────────────────────
-function InfiniteZoomInner({ sharedToken, shareSlot }: Props) {
+function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<InfiniteZoomHandle>) {
   const navigate = useNavigate()
 
   const [data, setData] = useState<ExploreData | null>(null)
@@ -54,6 +58,12 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props) {
   const crossBranchSurface = sharedToken ? 'zui-shared' : 'zui'
   const { settings: crossBranchSettings, setEnabled: setCrossBranchEnabled } = useCrossBranchContextSettings(crossBranchSurface)
 
+  useImperativeHandle(ref, () => ({
+    focusDiagram(viewId: number) {
+      return zuiRef.current?.focusDiagram(viewId) ?? false
+    },
+  }), [])
+
   // ── No data or No content ────────────────────────────────────────
   const hasPlacements = useMemo(() => {
     if (!data || !data.views) return false
@@ -387,9 +397,8 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props) {
 
 // ── Exports ───────────────────────────────────────────────────────
 
-export default function InfiniteZoom(props: Props) {
-  return <InfiniteZoomInner {...props} />
-}
+const InfiniteZoom = forwardRef<InfiniteZoomHandle, Props>(InfiniteZoomInner)
+export default InfiniteZoom
 
 export function SharedInfiniteZoom(props: Props) {
   const { token } = useParams()

package/src/pages/ViewEditor/context.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react'
+import { createContext, useContext } from 'react'
 import type { LibraryElement, Connector } from '../../types'
 import { useStore } from '../../store/useStore'
 
@@ -16,6 +16,7 @@ export interface ViewEditorContextValue {
 export const ViewEditorContext = createContext<ViewEditorContextValue | null>(null)
 
 export function useViewEditorContext(): ViewEditorContextValue {
+  const context = useContext(ViewEditorContext)
   const viewId = useStore((state) => state.viewId)
   const canEdit = useStore((state) => state.canEdit)
   const isOwner = useStore((state) => state.isOwner)
@@ -25,5 +26,7 @@ export function useViewEditorContext(): ViewEditorContextValue {
   const selectedElement = useStore((state) => state.selectedElement)
   const selectedConnector = useStore((state) => state.selectedConnector)
 
+  if (context) return context
+
   return { viewId, canEdit, isOwner, isFreePlan, snapToGrid, setSnapToGrid, selectedElement, selectedConnector }
 }

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

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import type { Connector } from '../../../types'
+import { getConnectorDeletionTarget } from './useCanvasInteractions'
+
+const connector = (id: number): Connector => ({
+  id,
+  view_id: 1,
+  source_element_id: 10,
+  target_element_id: 20,
+  label: null,
+  description: null,
+  relationship: null,
+  direction: 'forward',
+  style: 'bezier',
+  url: null,
+  source_handle: 'right',
+  target_handle: 'left',
+  created_at: '2024-01-01',
+  updated_at: '2024-01-01',
+})
+
+describe('getConnectorDeletionTarget', () => {
+  it('returns the selected connector id', () => {
+    expect(getConnectorDeletionTarget(connector(7))).toBe(7)
+  })
+
+  it('returns null when nothing is selected', () => {
+    expect(getConnectorDeletionTarget(null)).toBeNull()
+  })
+})