@tldiagram/core-ui 1.95.0 → 2.0.0

package/src/components/ZUI/types.ts

@@ -10,6 +10,10 @@ export interface ZUIViewState {
   y: number
   /** Current zoom multiplier (1 = 1 world-pixel per screen-pixel). */
   zoom: number
+  /** World-space X rendered at the local camera origin. Keeps x screen-sized at deep zoom. */
+  originX?: number
+  /** World-space Y rendered at the local camera origin. Keeps y screen-sized at deep zoom. */
+  originY?: number
 }
 
 /**
@@ -71,6 +75,7 @@ export interface LayoutNode {
 
   // ── Edges within the same diagram ────────────────────────────────
   edgesOut: Array<{
+    id: number
     /** LayoutNode id of the target. */
     targetId: string
     label: string
@@ -103,6 +108,7 @@ export interface DiagramGroupLayout {
   nodes: LayoutNode[]
   /** Edges whose both endpoints are in this diagram. */
   edges: Array<{
+    id: number
     sourceId: string
     targetId: string
     label: string

package/src/components/ZUI/useZUIInteraction.ts

@@ -2,23 +2,39 @@
 
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react'
 import type { BBox, DiagramGroupLayout, LayoutNode, ZUIViewState, HoveredItem } from './types'
-import { getExpandThresholds } from './renderer'
+import { getExpandThresholds, screenToWorldX, screenToWorldY, viewOriginX, viewOriginY } from './renderer'
+
+export function constrainViewState(view: ZUIViewState, canvasW: number, canvasH: number, bbox: BBox): ZUIViewState {
+  const padding = Math.min(600, canvasW * 0.45, canvasH * 0.45)
+  const normalized = normalizeViewState(view, canvasW, canvasH)
+  const halfVisibleX = Math.max(0, canvasW / 2 - padding) / normalized.zoom
+  const halfVisibleY = Math.max(0, canvasH / 2 - padding) / normalized.zoom
+  const minOriginX = bbox.minX - halfVisibleX
+  const maxOriginX = bbox.maxX + halfVisibleX
+  const minOriginY = bbox.minY - halfVisibleY
+  const maxOriginY = bbox.maxY + halfVisibleY
 
-function constrainViewState(view: ZUIViewState, canvasW: number, canvasH: number, bbox: BBox): ZUIViewState {
-  const padding = 600 // pixels
-  const minX = padding - bbox.maxX * view.zoom
-  const maxX = canvasW - padding - bbox.minX * view.zoom
-  const minY = padding - bbox.maxY * view.zoom
-  const maxY = canvasH - padding - bbox.minY * view.zoom
-
-  let { x, y } = view
-  if (maxX >= minX) x = Math.max(minX, Math.min(maxX, x))
-  else x = (minX + maxX) / 2
-
-  if (maxY >= minY) y = Math.max(minY, Math.min(maxY, y))
-  else y = (minY + maxY) / 2
+  return {
+    ...normalized,
+    originX: maxOriginX >= minOriginX
+      ? Math.max(minOriginX, Math.min(maxOriginX, viewOriginX(normalized)))
+      : (minOriginX + maxOriginX) / 2,
+    originY: maxOriginY >= minOriginY
+      ? Math.max(minOriginY, Math.min(maxOriginY, viewOriginY(normalized)))
+      : (minOriginY + maxOriginY) / 2,
+  }
+}
 
-  return { ...view, x, y }
+function normalizeViewState(view: ZUIViewState, canvasW: number, canvasH: number): ZUIViewState {
+  const zoom = Math.max(0.0001, view.zoom)
+  return {
+    ...view,
+    x: canvasW / 2,
+    y: canvasH / 2,
+    zoom,
+    originX: screenToWorldX(canvasW / 2, { ...view, zoom }),
+    originY: screenToWorldY(canvasH / 2, { ...view, zoom }),
+  }
 }
 
 interface DeepestNodeResult {
@@ -392,6 +408,12 @@ export function calculateMaxZoom(groups: DiagramGroupLayout[], canvasW: number):
 }
 
 const MIN_ZOOM = 0.4
+const ZUI_NATIVE_WHEEL_SELECTOR = '[data-zui-native-wheel="true"]'
+
+function shouldIgnoreCapturedWheel(e: WheelEvent): boolean {
+  const target = e.target
+  return target instanceof Element && target.closest(ZUI_NATIVE_WHEEL_SELECTOR) !== null
+}
 
 function clampZoom(z: number, prevZ: number, maxZ: number): number {
   if (z > prevZ) {
@@ -412,11 +434,16 @@ function zoomAround(
   maxZoom: number,
 ): ZUIViewState {
   const newZoom = clampZoom(view.zoom * factor, view.zoom, maxZoom)
-  const scale = newZoom / view.zoom
+  const worldX = screenToWorldX(focalX, view)
+  const worldY = screenToWorldY(focalY, view)
+  const originX = viewOriginX(view)
+  const originY = viewOriginY(view)
   return {
+    originX,
+    originY,
     zoom: newZoom,
-    x: focalX - (focalX - view.x) * scale,
-    y: focalY - (focalY - view.y) * scale,
+    x: focalX - (worldX - originX) * newZoom,
+    y: focalY - (worldY - originY) * newZoom,
   }
 }
 
@@ -590,6 +617,17 @@ export function useZUIInteraction(
     if (!el) return
 
     function onWheel(e: WheelEvent) {
+      if (shouldIgnoreCapturedWheel(e)) return
+
+      const rect = el!.getBoundingClientRect()
+      const isInsideCanvas =
+        e.clientX >= rect.left &&
+        e.clientX <= rect.right &&
+        e.clientY >= rect.top &&
+        e.clientY <= rect.bottom
+
+      if (!isInsideCanvas) return
+
       // Heuristic to distinguish between trackpad and physical mouse wheel:
       // 1. If ctrlKey is true, it's a pinch (trackpad) or Ctrl+Wheel. We always zoom.
       // 2. If deltaMode !== 0, it's a physical mouse wheel (DOM_DELTA_LINE/PAGE). We zoom.
@@ -619,7 +657,6 @@ export function useZUIInteraction(
       const isRealMouseWheel = e.deltaMode !== 0 || isNotchedWheel
 
       if (isPinch || isRealMouseWheel) {
-        const rect = el!.getBoundingClientRect()
         const focalX = e.clientX - rect.left
         const focalY = e.clientY - rect.top
 
@@ -628,8 +665,8 @@ export function useZUIInteraction(
         factor = Math.max(0.85, Math.min(1.15, factor))
 
         setViewState((prev) => {
-          const worldX = (focalX - prev.x) / prev.zoom
-          const worldY = (focalY - prev.y) / prev.zoom
+          const worldX = screenToWorldX(focalX, prev)
+          const worldY = screenToWorldY(focalY, prev)
           const thresholds = getExpandThresholds(rect.width)
           const deepest = findDeepestAt(worldX, worldY, groupsRef.current, prev, thresholds)
 
@@ -677,8 +714,8 @@ export function useZUIInteraction(
 
       // Hover detection
       const view = viewStateRef.current
-      const worldX = (screenX - view.x) / view.zoom
-      const worldY = (screenY - view.y) / view.zoom
+      const worldX = screenToWorldX(screenX, view)
+      const worldY = screenToWorldY(screenY, view)
       const thresholds = getExpandThresholds(rect.width)
 
       const deepest = findDeepestAt(worldX, worldY, groupsRef.current, view, thresholds)
@@ -731,8 +768,8 @@ export function useZUIInteraction(
       setHoveredItem(null, true) // Clear popover immediately on double-click zoom
 
       setViewState((prev) => {
-        const worldX = (focalX - prev.x) / prev.zoom
-        const worldY = (focalY - prev.y) / prev.zoom
+        const worldX = screenToWorldX(focalX, prev)
+        const worldY = screenToWorldY(focalY, prev)
         const thresholds = getExpandThresholds(rect.width)
         const deepest = findDeepestAt(worldX, worldY, groupsRef.current, prev, thresholds)
 
@@ -802,8 +839,8 @@ export function useZUIInteraction(
           if (isFinite(factor) && factor > 0) {
             setViewState((prev) => {
               const rect = el!.getBoundingClientRect()
-              const worldX = (mid.x - prev.x) / prev.zoom
-              const worldY = (mid.y - prev.y) / prev.zoom
+              const worldX = screenToWorldX(mid.x, prev)
+              const worldY = screenToWorldY(mid.y, prev)
               const thresholds = getExpandThresholds(rect.width)
               const deepest = findDeepestAt(worldX, worldY, groupsRef.current, prev, thresholds)
 
@@ -843,7 +880,7 @@ export function useZUIInteraction(
 
     el.style.cursor = 'grab'
 
-    el.addEventListener('wheel', onWheel, { passive: false })
+    window.addEventListener('wheel', onWheel, { passive: false, capture: true })
     el.addEventListener('mousedown', onMouseDown)
     el.addEventListener('mouseleave', onMouseOut)
     el.addEventListener('mouseout', onMouseOut)
@@ -856,7 +893,7 @@ export function useZUIInteraction(
     el.addEventListener('touchcancel', onTouchEnd)
 
     return () => {
-      el.removeEventListener('wheel', onWheel)
+      window.removeEventListener('wheel', onWheel, { capture: true })
       el.removeEventListener('mousedown', onMouseDown)
       el.removeEventListener('mouseleave', onMouseOut)
       el.removeEventListener('mouseout', onMouseOut)

package/src/context/WorkspaceVersionContext.tsx

@@ -0,0 +1,126 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import type { WatchDiff, WatchRepository, WatchVersion, WorkspaceVersion } from '../api/client'
+import { normalizeWatchChangeType } from '../utils/watchDiffSummary'
+
+export type VersionChangeType = 'added' | 'updated' | 'deleted' | 'initialized'
+
+export interface VersionLineDelta {
+  added: number
+  removed: number
+}
+
+export interface WorkspaceVersionPreview {
+  repository: WatchRepository | null
+  version: WatchVersion | null
+  workspaceVersions: WorkspaceVersion[]
+  diffs: WatchDiff[]
+  elementChanges: Map<number, VersionChangeType>
+  elementLineDeltas: Map<number, VersionLineDelta>
+  connectorChanges: Map<number, VersionChangeType>
+  summary: {
+    added: number
+    updated: number
+    deleted: number
+    initialized: number
+    elements: number
+    connectors: number
+  }
+}
+
+export interface WorkspaceVersionFollowTarget {
+  token: number
+  resourceType: string
+  resourceId?: number
+  viewId?: number
+  changeType?: VersionChangeType
+}
+
+interface WorkspaceVersionContextValue {
+  preview: WorkspaceVersionPreview | null
+  followToken: number
+  followTarget: WorkspaceVersionFollowTarget | null
+  setPreview: (preview: WorkspaceVersionPreview | null) => void
+  clearPreview: () => void
+  requestFollow: (target?: Omit<WorkspaceVersionFollowTarget, 'token'>) => void
+}
+
+const WorkspaceVersionContext = createContext<WorkspaceVersionContextValue | null>(null)
+
+export function buildWorkspaceVersionPreview(args: {
+  repository: WatchRepository | null
+  version: WatchVersion | null
+  workspaceVersions: WorkspaceVersion[]
+  diffs: WatchDiff[] | null | undefined
+}): WorkspaceVersionPreview {
+  const diffs = Array.isArray(args.diffs) ? args.diffs : []
+  const elementChanges = new Map<number, VersionChangeType>()
+  const elementLineDeltas = new Map<number, VersionLineDelta>()
+  const connectorChanges = new Map<number, VersionChangeType>()
+  const summary = { added: 0, updated: 0, deleted: 0, initialized: 0, elements: 0, connectors: 0 }
+
+  diffs.forEach((diff) => {
+    const change = normalizeWatchChangeType(diff.change_type)
+    summary[change] += 1
+    if (diff.resource_type === 'element' && diff.resource_id) {
+      elementChanges.set(diff.resource_id, change)
+      const added = Math.max(0, diff.added_lines ?? 0)
+      const removed = Math.max(0, diff.removed_lines ?? 0)
+      if (added > 0 || removed > 0) {
+        elementLineDeltas.set(diff.resource_id, { added, removed })
+      }
+      summary.elements += 1
+    }
+    if (diff.resource_type === 'connector' && diff.resource_id) {
+      connectorChanges.set(diff.resource_id, change)
+      summary.connectors += 1
+    }
+  })
+
+  return {
+    repository: args.repository,
+    version: args.version,
+    workspaceVersions: args.workspaceVersions,
+    diffs,
+    elementChanges,
+    elementLineDeltas,
+    connectorChanges,
+    summary,
+  }
+}
+
+export function WorkspaceVersionProvider({ children }: { children: React.ReactNode }) {
+  const [preview, setPreview] = useState<WorkspaceVersionPreview | null>(null)
+  const [followToken, setFollowToken] = useState(0)
+  const [followTarget, setFollowTarget] = useState<WorkspaceVersionFollowTarget | null>(null)
+  const followClearTimerRef = useRef<number | null>(null)
+  const clearPreview = useCallback(() => setPreview(null), [])
+  const requestFollow = useCallback((target?: Omit<WorkspaceVersionFollowTarget, 'token'>) => {
+    setFollowToken((value) => value + 1)
+    if (followClearTimerRef.current !== null) {
+      window.clearTimeout(followClearTimerRef.current)
+      followClearTimerRef.current = null
+    }
+    if (!target) {
+      setFollowTarget(null)
+      return
+    }
+    setFollowTarget({ ...target, token: Date.now() })
+    followClearTimerRef.current = window.setTimeout(() => {
+      setFollowTarget(null)
+      followClearTimerRef.current = null
+    }, 1600)
+  }, [])
+  useEffect(() => {
+    return () => {
+      if (followClearTimerRef.current !== null) window.clearTimeout(followClearTimerRef.current)
+    }
+  }, [])
+  const value = useMemo(() => ({ preview, followToken, followTarget, setPreview, clearPreview, requestFollow }), [preview, followToken, followTarget, clearPreview, requestFollow])
+  return <WorkspaceVersionContext.Provider value={value}>{children}</WorkspaceVersionContext.Provider>
+}
+
+export function useWorkspaceVersionPreview() {
+  const value = useContext(WorkspaceVersionContext)
+  if (!value) throw new Error('useWorkspaceVersionPreview must be used within WorkspaceVersionProvider')
+  return value
+}

package/src/crossBranch/resolve.test.ts

@@ -0,0 +1,342 @@
+import { describe, expect, it } from 'vitest'
+import { buildWorkspaceGraphSnapshot } from './graph'
+import { resolveZUIProxyConnectors } from './resolve'
+import type { ResolveZUIProxyConnectorOptions, ZUIConnectorAnchorInfo } from './resolve'
+import type { Connector, ExploreData, PlacedElement, ViewTreeNode } from '../types'
+import type { CrossBranchContextSettings } from './types'
+
+function placedElement(view_id: number, element_id: number, name: string): PlacedElement {
+  return {
+    id: view_id * 100 + element_id,
+    view_id,
+    element_id,
+    position_x: element_id * 10,
+    position_y: 0,
+    name,
+    description: null,
+    kind: 'service',
+    technology: null,
+    url: null,
+    logo_url: null,
+    technology_connectors: [],
+    tags: [],
+    has_view: element_id === 1 || element_id === 3,
+    view_label: null,
+  }
+}
+
+function connector(id: number, view_id: number, source_element_id: number, target_element_id: number, label: string): Connector {
+  return {
+    id,
+    view_id,
+    source_element_id,
+    target_element_id,
+    label,
+    description: null,
+    relationship: null,
+    direction: 'forward',
+    style: 'bezier',
+    url: null,
+    source_handle: null,
+    target_handle: null,
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+  }
+}
+
+function zuiSettings(overrides: Partial<CrossBranchContextSettings> = {}): CrossBranchContextSettings {
+  return {
+    enabled: true,
+    depth: 5,
+    connectorBudget: 50,
+    connectorPriority: 'external',
+    ...overrides,
+  }
+}
+
+function anchor(nodeId: string, x: number, y = 0): ZUIConnectorAnchorInfo {
+  return {
+    nodeId,
+    worldX: x,
+    worldY: y,
+    worldW: 10,
+    worldH: 10,
+  }
+}
+
+function viewportOptions(anchorsByElementId: Map<number, ZUIConnectorAnchorInfo>): ResolveZUIProxyConnectorOptions {
+  return {
+    anchorsByElementId,
+    viewport: {
+      minX: 0,
+      minY: 0,
+      maxX: 100,
+      maxY: 100,
+      centerX: 50,
+      centerY: 50,
+    },
+  }
+}
+
+const tree: ViewTreeNode[] = [{
+  id: 1,
+  owner_element_id: null,
+  name: 'Root',
+  description: null,
+  level_label: null,
+  level: 0,
+  depth: 0,
+  created_at: '2024-01-01',
+  updated_at: '2024-01-01',
+  parent_view_id: null,
+  children: [{
+    id: 2,
+    owner_element_id: 1,
+    name: 'A Child',
+    description: null,
+    level_label: null,
+    level: 1,
+    depth: 1,
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+    parent_view_id: 1,
+    children: [{
+      id: 3,
+      owner_element_id: 3,
+      name: 'AA Child',
+      description: null,
+      level_label: null,
+      level: 2,
+      depth: 2,
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      parent_view_id: 2,
+      children: [],
+    }],
+  }],
+}]
+
+function baseData(connectors: Connector[]): ExploreData {
+  return {
+    tree,
+    navigations: [
+      { id: 1, element_id: 1, from_view_id: 1, to_view_id: 2, to_view_name: 'A Child', relation_type: 'child' },
+      { id: 2, element_id: 3, from_view_id: 2, to_view_id: 3, to_view_name: 'AA Child', relation_type: 'child' },
+    ],
+    views: {
+      '1': {
+        placements: [placedElement(1, 1, 'A'), placedElement(1, 2, 'B')],
+        connectors,
+      },
+      '2': {
+        placements: [placedElement(2, 3, 'AA')],
+        connectors: [],
+      },
+      '3': {
+        placements: [placedElement(3, 4, 'AAA')],
+        connectors: [],
+      },
+    },
+  }
+}
+
+describe('resolveZUIProxyConnectors', () => {
+  it('collapses direct-child cross-branch links into a native +N badge', () => {
+    const snapshot = buildWorkspaceGraphSnapshot(baseData([
+      connector(1, 1, 1, 2, 'A-B'),
+      connector(2, 1, 3, 2, 'AA-B'),
+    ]))
+
+    const resolved = resolveZUIProxyConnectors(
+      snapshot,
+      new Map([
+        [1, 'd1-o1'],
+        [2, 'd1-o2'],
+      ]),
+      zuiSettings(),
+    )
+
+    expect(resolved.connectors).toHaveLength(0)
+    expect(resolved.hiddenBadges).toHaveLength(1)
+    expect(resolved.hiddenBadges[0]).toMatchObject({
+      sourceAnchorElementId: 1,
+      targetAnchorElementId: 2,
+      count: 1,
+    })
+  })
+
+  it('fractures the badge into direct child and parent connectors when the child is visible', () => {
+    const snapshot = buildWorkspaceGraphSnapshot(baseData([
+      connector(1, 1, 1, 2, 'A-B'),
+      connector(2, 1, 3, 2, 'AA-B'),
+    ]))
+
+    const resolved = resolveZUIProxyConnectors(
+      snapshot,
+      new Map([
+        [1, 'd1-o1'],
+        [2, 'd1-o2'],
+        [3, 'd2-o3'],
+      ]),
+      zuiSettings(),
+    )
+
+    expect(resolved.hiddenBadges).toHaveLength(0)
+    expect(resolved.connectors.map((item) => [item.sourceAnchorElementId, item.targetAnchorElementId])).toEqual([[2, 3]])
+  })
+
+  it('keeps only the deepest visible connector and its parent once grandchildren are visible', () => {
+    const snapshot = buildWorkspaceGraphSnapshot(baseData([
+      connector(1, 1, 1, 2, 'A-B'),
+      connector(2, 1, 4, 2, 'AAA-B'),
+    ]))
+
+    const resolved = resolveZUIProxyConnectors(
+      snapshot,
+      new Map([
+        [1, 'd1-o1'],
+        [2, 'd1-o2'],
+        [3, 'd2-o3'],
+        [4, 'd3-o4'],
+      ]),
+      zuiSettings(),
+    )
+
+    expect(resolved.hiddenBadges).toHaveLength(0)
+    expect(resolved.connectors.map((item) => [item.sourceAnchorElementId, item.targetAnchorElementId]).sort()).toEqual([
+      [2, 3],
+      [2, 4],
+    ])
+  })
+
+  it('budgets visible connector groups and reports the omitted leaf count', () => {
+    const data = baseData([
+      connector(1, 1, 3, 2, 'one'),
+      connector(2, 1, 4, 2, 'two'),
+      connector(3, 1, 5, 2, 'three'),
+    ])
+    data.views['2'].placements = [
+      placedElement(2, 3, 'AA'),
+      placedElement(2, 4, 'AB'),
+      placedElement(2, 5, 'AC'),
+    ]
+    const snapshot = buildWorkspaceGraphSnapshot(data)
+
+    const resolved = resolveZUIProxyConnectors(
+      snapshot,
+      new Map([
+        [1, 'd1-o1'],
+        [2, 'd1-o2'],
+        [3, 'd2-o3'],
+        [4, 'd2-o4'],
+        [5, 'd2-o5'],
+      ]),
+      zuiSettings({ connectorBudget: 2 }),
+    )
+
+    expect(resolved.connectors).toHaveLength(2)
+    expect(resolved.omittedConnectorCount).toBe(3)
+  })
+
+  it('reducing the budget keeps a subset of the larger-budget result', () => {
+    const connectors = [
+      connector(1, 1, 4, 2, 'deep-one'),
+      connector(2, 1, 4, 2, 'deep-two'),
+      connector(3, 1, 3, 2, 'shallow'),
+    ]
+    const snapshot = buildWorkspaceGraphSnapshot(baseData(connectors))
+    const visibleNodes = new Map([
+      [1, 'd1-o1'],
+      [2, 'd1-o2'],
+      [3, 'd2-o3'],
+      [4, 'd3-o4'],
+    ])
+
+    const budgetTwo = resolveZUIProxyConnectors(
+      snapshot,
+      visibleNodes,
+      zuiSettings({ connectorBudget: 2 }),
+    )
+    const budgetOne = resolveZUIProxyConnectors(
+      snapshot,
+      visibleNodes,
+      zuiSettings({ connectorBudget: 1 }),
+    )
+
+    const budgetTwoKeys = new Set(budgetTwo.connectors.map((item) => item.key))
+    expect(budgetTwo.connectors).toHaveLength(2)
+    expect(budgetOne.connectors).toHaveLength(1)
+    expect(budgetOne.connectors.every((item) => budgetTwoKeys.has(item.key))).toBe(true)
+  })
+
+  it('prioritizes one-near one-far connector groups in external mode', () => {
+    const data = baseData([
+      connector(1, 1, 3, 2, 'near-far'),
+      connector(2, 1, 4, 2, 'near-near'),
+    ])
+    data.views['2'].placements = [
+      placedElement(2, 3, 'External Far'),
+      placedElement(2, 4, 'Internal Near'),
+    ]
+    const snapshot = buildWorkspaceGraphSnapshot(data)
+    const visibleNodes = new Map([
+      [2, 'd1-o2'],
+      [3, 'd2-o3'],
+      [4, 'd2-o4'],
+    ])
+    const options = viewportOptions(new Map([
+      [2, anchor('d1-o2', 45, 45)],
+      [3, anchor('d2-o3', 400, 45)],
+      [4, anchor('d2-o4', 60, 45)],
+    ]))
+
+    const resolved = resolveZUIProxyConnectors(
+      snapshot,
+      visibleNodes,
+      zuiSettings({ connectorBudget: 1, connectorPriority: 'external' }),
+      options,
+    )
+
+    expect(resolved.connectors).toHaveLength(1)
+    expect(resolved.connectors[0].details.connectors[0].connector.label).toBe('near-far')
+  })
+
+  it('prioritizes both-near connector groups in internal mode', () => {
+    const data = baseData([
+      connector(1, 1, 3, 2, 'near-far'),
+      connector(2, 1, 4, 2, 'near-near'),
+    ])
+    data.views['2'].placements = [
+      placedElement(2, 3, 'External Far'),
+      placedElement(2, 4, 'Internal Near'),
+    ]
+    const snapshot = buildWorkspaceGraphSnapshot(data)
+    const visibleNodes = new Map([
+      [2, 'd1-o2'],
+      [3, 'd2-o3'],
+      [4, 'd2-o4'],
+    ])
+    const options = viewportOptions(new Map([
+      [2, anchor('d1-o2', 45, 45)],
+      [3, anchor('d2-o3', 400, 45)],
+      [4, anchor('d2-o4', 60, 45)],
+    ]))
+
+    const resolved = resolveZUIProxyConnectors(
+      snapshot,
+      visibleNodes,
+      zuiSettings({ connectorBudget: 1, connectorPriority: 'internal' }),
+      options,
+    )
+
+    expect(resolved.connectors).toHaveLength(1)
+    expect(resolved.connectors[0].details.connectors[0].connector.label).toBe('near-near')
+  })
+
+  it('uses a default budget of 50 and external priority in test settings', () => {
+    expect(zuiSettings()).toMatchObject({
+      connectorBudget: 50,
+      connectorPriority: 'external',
+    })
+  })
+})