@tldiagram/core-ui 2.0.0 → 2.0.2

package/dist/store/useStore.d.ts

@@ -68,6 +68,7 @@ export declare function updatePlacedElementPosition(elements: PlacedElement[], e
 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 resolveElementForUpdate(elementId: number, selectedElement: LibraryElement | null, allElements: LibraryElement[], viewElements: PlacedElement[]): LibraryElement | null;
 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/dist/types/vscode-messages.d.ts

@@ -58,3 +58,15 @@ export type WebviewToExtensionMessage = {
     filePath: string;
     startLine: number;
 };
+export interface WatchEventDetail {
+    type: string;
+    repository_id?: number;
+    message?: string;
+    at: string;
+    data?: any;
+}
+export interface SyncStatusPayload {
+    localChanges: number;
+    needsPush: boolean;
+    needsPull: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@buf/tldiagramcom_diagram.bufbuild_es": "^2.12.0-20260503002426-45e3166b5ec1.1",
+    "@buf/tldiagramcom_diagram.bufbuild_es": "^2.12.0-20260510134954-1dd1981cf3f6.1",
     "@bufbuild/protobuf": "^2.11.0",
     "esbuild": "^0.25.12",
     "zustand": "^5.0.12"
@@ -126,8 +126,8 @@
     "@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",
+    "@tanstack/react-query": "^5.100.1",
     "@types/dagre": "^0.7.54",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

package/src/api/client.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeConnectorRouteStyle } from './client'
+
+describe('normalizeConnectorRouteStyle', () => {
+  it('keeps valid route styles', () => {
+    expect(normalizeConnectorRouteStyle('bezier')).toBe('bezier')
+    expect(normalizeConnectorRouteStyle('straight')).toBe('straight')
+    expect(normalizeConnectorRouteStyle('step')).toBe('step')
+    expect(normalizeConnectorRouteStyle('smoothstep')).toBe('smoothstep')
+  })
+
+  it('maps legacy line styles to bezier', () => {
+    expect(normalizeConnectorRouteStyle('solid')).toBe('bezier')
+    expect(normalizeConnectorRouteStyle('dashed')).toBe('bezier')
+    expect(normalizeConnectorRouteStyle(undefined)).toBe('bezier')
+  })
+})

package/src/api/client.ts

@@ -59,6 +59,12 @@ import {
 import { transport } from './transport'
 import { apiUrl, fetchApiAsset } from '../config/runtime'
 
+const CONNECTOR_ROUTE_STYLES = new Set(['bezier', 'straight', 'step', 'smoothstep'])
+
+export function normalizeConnectorRouteStyle(style: unknown): string {
+  return typeof style === 'string' && CONNECTOR_ROUTE_STYLES.has(style) ? style : 'bezier'
+}
+
 async function responseError(res: Response, fallback: string): Promise<Error> {
   const body = await res.json().catch(() => null) as { error?: string } | null
   return new Error(body?.error || `${fallback}: ${res.statusText}`)
@@ -403,7 +409,7 @@ function protoConnector(e: Record<string, unknown>): Connector {
     description: (e.description ?? null) as string | null,
     relationship: (e.relationship ?? null) as string | null,
     direction: String(e.direction ?? 'forward'),
-    style: String(e.style ?? 'bezier'),
+    style: normalizeConnectorRouteStyle(e.style),
     url: (e.url ?? null) as string | null,
     source_handle: (e.source_handle ?? null) as string | null,
     target_handle: (e.target_handle ?? null) as string | null,
@@ -936,7 +942,7 @@ export const api = {
             description: data.description ?? undefined,
             relationship: data.relationship ?? undefined,
             direction: data.direction ?? undefined,
-            style: data.style ?? undefined,
+            style: normalizeConnectorRouteStyle(data.style),
             url: data.url ?? undefined,
             sourceHandle: data.source_handle ?? undefined,
             targetHandle: data.target_handle ?? undefined,
@@ -970,7 +976,7 @@ export const api = {
             description: data.description ?? undefined,
             relationship: data.relationship ?? undefined,
             direction: data.direction ?? undefined,
-            style: data.style ?? undefined,
+            style: data.style === undefined ? undefined : normalizeConnectorRouteStyle(data.style),
             url: data.url ?? undefined,
             sourceHandle: data.source_handle ?? undefined,
             targetHandle: data.target_handle ?? undefined,

package/src/components/LayoutSection.tsx

@@ -66,7 +66,7 @@ export default function LayoutSection({ view, canEdit, onUnsupportedMutation }:
   })
 
   const [forceConfig, setForceConfig] = useState<ForceConfig>({
-    linkDistance: 180,
+    linkDistance: 300,
     chargeStrength: -150,
     collideRadius: 130,
     iterations: 300,
@@ -576,17 +576,17 @@ export default function LayoutSection({ view, canEdit, onUnsupportedMutation }:
           </Button>
           {/* Apply button */}
           <VStack spacing={2} w="full">
-          <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"
+            <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"

package/src/components/ViewExplorer/TagManager/TagItem.tsx

@@ -104,6 +104,8 @@ export const TagItem: React.FC<Props> = ({
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
+          draggable
+          onDragStart={handleDragStart}
           cursor="grab"
           _active={{ cursor: 'grabbing' }}
           role="group"

package/src/components/ZUI/ZUICanvas.tsx

@@ -46,6 +46,8 @@ import {
   type VisibleNodeAnchor,
 } from './proxy'
 
+const MAX_PROXY_HOVER_VIEW_LINKS = 5
+
 export interface ZUICanvasHandle {
   fitView(): void
   focusDiagram(viewId: number): boolean
@@ -1053,7 +1055,7 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
                     </VStack>
                     <Divider borderColor="whiteAlpha.200" />
                     <VStack align="stretch" spacing={2} width="full">
-                      {hoveredItem.data.details.ownerViewIds.map((ownerViewId, index) => (
+                      {hoveredItem.data.details.ownerViewIds.slice(0, MAX_PROXY_HOVER_VIEW_LINKS).map((ownerViewId, index) => (
                         <Button
                           key={`${ownerViewId}-${index}`}
                           as={RouterLink}
@@ -1069,6 +1071,11 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
                           {hoveredItem.data.details!.ownerViewNames[index] ?? `Open View ${ownerViewId}`}
                         </Button>
                       ))}
+                      {hoveredItem.data.details.ownerViewIds.length > MAX_PROXY_HOVER_VIEW_LINKS && (
+                        <Text fontSize="xs" color="gray.500" textAlign="center">
+                          +{hoveredItem.data.details.ownerViewIds.length - MAX_PROXY_HOVER_VIEW_LINKS} more view{hoveredItem.data.details.ownerViewIds.length - MAX_PROXY_HOVER_VIEW_LINKS === 1 ? '' : 's'}
+                        </Text>
+                      )}
                     </VStack>
                     <Divider borderColor="whiteAlpha.200" />
                     <HStack width="full" spacing={2}>

package/src/components/ZUI/focus.test.ts

@@ -284,6 +284,26 @@ function expectScreenRectVisible(
 }
 
 describe('ZUI focus targets', () => {
+  it('derives ZUI node icons from assigned catalog technology connectors', () => {
+    const data: ExploreData = {
+      tree: [treeNode(1, 'Root', null, null)],
+      navigations: [],
+      views: {
+        1: {
+          placements: [{
+            ...placed(1, 1, 0, 0),
+            technology_connectors: [{ type: 'catalog', slug: 'golang', label: 'Go', is_primary_icon: true }],
+          }],
+          connectors: [],
+        },
+      },
+    }
+
+    const layout = computeLayout(data)
+
+    expect(layout.groups[0]?.nodes[0]?.logoUrl).toBe('/icons/golang.png')
+  })
+
   it('rebases a high-zoom camera to a small centered render transform', () => {
     const rebase = getCameraRebase(
       { x: -147_317_059.10654327, y: -184_315_493.52577353, zoom: 906_732.1382976775 },

package/src/components/ZUI/proxy.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest'
+import { collectVisibleNodeAnchors, getProxyBezierBadgeGeometry, type VisibleNodeAnchor } from './proxy'
+import { DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA } from '../../crossBranch/settings'
+import type { LayoutNode } from './types'
+
+function node(id: string, elementId: number, children: LayoutNode[] = []): LayoutNode {
+  return {
+    id,
+    elementId,
+    diagramId: elementId,
+    worldX: 0,
+    worldY: 0,
+    worldW: 100,
+    worldH: 100,
+    label: id,
+    type: 'service',
+    logoUrl: null,
+    description: null,
+    technology: null,
+    tags: [],
+    ancestorElementIds: [],
+    pathElementIds: [elementId],
+    children,
+    childScale: 1,
+    childOffsetX: 0,
+    childOffsetY: 0,
+    edgesOut: [],
+  }
+}
+
+describe('collectVisibleNodeAnchors', () => {
+  it('keeps fallback anchors for ancestors when only deeper descendants are self drawn', () => {
+    const grandchild = node('grandchild', 3)
+    const child = node('child', 2, [grandchild])
+    const parent = node('parent', 1, [child])
+
+    const anchors = collectVisibleNodeAnchors(
+      [{ nodes: [parent] }],
+      { x: 0, y: 0, zoom: 5 },
+      1000,
+    )
+
+    expect(anchors.visibleAnchors.get(3)?.renderAlpha).toBe(1)
+    expect(anchors.visibleAnchors.get(2)?.renderAlpha).toBeGreaterThan(0)
+    expect(anchors.visibleAnchors.get(1)?.renderAlpha).toBeGreaterThan(0)
+  })
+
+  it('keeps fully expanded ancestor fallback anchors eligible for connectors', () => {
+    const grandchild = node('grandchild', 3)
+    const child = node('child', 2, [grandchild])
+    const parent = node('parent', 1, [child])
+
+    const anchors = collectVisibleNodeAnchors(
+      [{ nodes: [parent] }],
+      { x: 0, y: 0, zoom: 5 },
+      1000,
+    )
+
+    expect(anchors.visibleAnchors.get(1)?.renderAlpha).toBeGreaterThanOrEqual(DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA)
+    expect(anchors.visibleAnchors.get(2)?.renderAlpha).toBeGreaterThanOrEqual(DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA)
+  })
+
+  it('keeps ancestor anchors eligible while the body fades into the dashed border', () => {
+    const child = node('child', 2)
+    const parent = node('parent', 1, [child])
+
+    const anchors = collectVisibleNodeAnchors(
+      [{ nodes: [parent] }],
+      { x: 0, y: 0, zoom: 3.7 },
+      1000,
+    )
+
+    expect(anchors.visibleAnchors.get(1)?.renderAlpha).toBeGreaterThanOrEqual(DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA)
+  })
+})
+
+function anchor(partial: Partial<VisibleNodeAnchor>): VisibleNodeAnchor {
+  return {
+    nodeId: partial.nodeId ?? 'node',
+    elementId: partial.elementId ?? 1,
+    label: partial.label ?? 'node',
+    worldX: partial.worldX ?? 0,
+    worldY: partial.worldY ?? 0,
+    worldW: partial.worldW ?? 100,
+    worldH: partial.worldH ?? 100,
+    pathDepth: partial.pathDepth ?? 1,
+    renderAlpha: partial.renderAlpha ?? 1,
+  }
+}
+
+describe('getProxyBezierBadgeGeometry', () => {
+  it('positions badges on the bezier curve instead of the straight connector chord', () => {
+    const source = anchor({ worldX: 0, worldY: 0, worldW: 200, worldH: 100 })
+    const target = anchor({ elementId: 2, worldX: 300, worldY: 180, worldW: 80, worldH: 100 })
+
+    const geometry = getProxyBezierBadgeGeometry(source, target)
+
+    expect(geometry.midX).not.toBe((200 + 300) / 2)
+    expect(Math.hypot(geometry.tangentX, geometry.tangentY)).toBeGreaterThan(0)
+  })
+})

package/src/components/ZUI/proxy.ts

@@ -10,6 +10,12 @@ import type { LayoutNode, ZUIViewState, HoveredItem } from './types'
 import { getExpandThresholds, pickEdgeLabelPosition, type ScreenRect } from './renderer'
 import type { CrossBranchContextSettings } from '../../crossBranch/types'
 import { DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA } from '../../crossBranch/settings'
+import {
+  DEFAULT_SOURCE_HANDLE_SIDE,
+  DEFAULT_TARGET_HANDLE_SIDE,
+  getHandleFlowPosition,
+  type LogicalHandleSide,
+} from '../../utils/edgeDistribution'
 
 export interface VisibleNodeAnchor {
   nodeId: string
@@ -35,6 +41,10 @@ function transitionT(screenW: number, start: number, end: number): number {
   return clamp((screenW - start) / (end - start), 0, 1)
 }
 
+function zoomableNodeConnectorAlpha(inheritedAlpha: number, bodyAlpha: number): number {
+  return Math.max(bodyAlpha, Math.min(inheritedAlpha, DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA))
+}
+
 function visualRectForNode(
   absX: number,
   absY: number,
@@ -90,8 +100,10 @@ function collectVisibleAnchorForNode(
   parentAbsScale: number,
   parentChildOffsetX: number,
   parentChildOffsetY: number,
-) {
-  if (hiddenTags.size > 0 && node.tags.some((tag) => hiddenTags.has(tag))) return { selfDrawn: false }
+): { selfDrawn: boolean; descendantDrawn: boolean } {
+  if (hiddenTags.size > 0 && node.tags.some((tag) => hiddenTags.has(tag))) {
+    return { selfDrawn: false, descendantDrawn: false }
+  }
 
   const absX = parentAbsX + (node.worldX - parentChildOffsetX) * parentAbsScale
   const absY = parentAbsY + (node.worldY - parentChildOffsetY) * parentAbsScale
@@ -99,7 +111,7 @@ function collectVisibleAnchorForNode(
   const absW = node.worldW * absScale
   const absH = node.worldH * absScale
   const screenW = absW * view.zoom
-  if (screenW < 2) return { selfDrawn: false }
+  if (screenW < 2) return { selfDrawn: false, descendantDrawn: false }
 
   const hasChildren = node.children && node.children.length > 0
   const t = hasChildren ? transitionT(screenW, thresholds.start, thresholds.end) : 0
@@ -118,11 +130,11 @@ function collectVisibleAnchorForNode(
       worldW: visualRect.worldW,
       worldH: visualRect.worldH,
       pathDepth: node.pathElementIds.length,
-      renderAlpha: hasChildren ? parentAlpha : inheritedAlpha,
+      renderAlpha: hasChildren ? zoomableNodeConnectorAlpha(inheritedAlpha, parentAlpha) : inheritedAlpha,
     })
   }
 
-  let hasDirectChildDrawn = false
+  let hasVisibleDescendant = false
   if (hasChildren && t > 0.05) {
     for (const child of node.children) {
       const childResult = collectVisibleAnchorForNode(
@@ -139,11 +151,11 @@ function collectVisibleAnchorForNode(
         node.childOffsetX,
         node.childOffsetY,
       )
-      hasDirectChildDrawn = hasDirectChildDrawn || childResult.selfDrawn
+      hasVisibleDescendant = hasVisibleDescendant || childResult.selfDrawn || childResult.descendantDrawn
     }
   }
 
-  if (!selfDrawn && hasDirectChildDrawn) {
+  if (!selfDrawn && hasVisibleDescendant) {
     registerVisibleAnchor(node, visibleAnchors, byNodeId, {
       nodeId: node.id,
       elementId: node.elementId,
@@ -153,11 +165,11 @@ function collectVisibleAnchorForNode(
       worldW: visualRect.worldW,
       worldH: visualRect.worldH,
       pathDepth: node.pathElementIds.length,
-      renderAlpha: Math.max(0.12, inheritedAlpha * 0.28),
+      renderAlpha: zoomableNodeConnectorAlpha(inheritedAlpha, inheritedAlpha * 0.28),
     })
   }
 
-  return { selfDrawn }
+  return { selfDrawn, descendantDrawn: selfDrawn || hasVisibleDescendant }
 }
 
 function collectVisibleAnchorsInNodes(
@@ -287,6 +299,84 @@ function getDirectAnchorPoints(source: VisibleNodeAnchor, target: VisibleNodeAnc
   return { sourcePoint, targetPoint }
 }
 
+type AnchorSide = 'top' | 'bottom' | 'left' | 'right'
+
+interface AnchorPoint {
+  x: number
+  y: number
+  side: AnchorSide
+}
+
+interface ProxyBezierBadgeGeometry {
+  midX: number
+  midY: number
+  tangentX: number
+  tangentY: number
+}
+
+function bezierControlPoint(
+  point: AnchorPoint,
+  stem: number,
+): AnchorPoint {
+  switch (point.side) {
+    case 'left':
+      return { x: point.x - stem, y: point.y, side: point.side }
+    case 'right':
+      return { x: point.x + stem, y: point.y, side: point.side }
+    case 'top':
+      return { x: point.x, y: point.y - stem, side: point.side }
+    case 'bottom':
+      return { x: point.x, y: point.y + stem, side: point.side }
+  }
+}
+
+export function getProxyBezierBadgeGeometry(
+  source: VisibleNodeAnchor,
+  target: VisibleNodeAnchor,
+  options: {
+    sourceHandle?: string | null
+    targetHandle?: string | null
+    sourceFallback?: LogicalHandleSide
+    targetFallback?: LogicalHandleSide
+  } = {},
+): ProxyBezierBadgeGeometry {
+  const sourcePoint = getHandleFlowPosition(
+    source.worldX,
+    source.worldY,
+    source.worldW,
+    source.worldH,
+    options.sourceHandle,
+    options.sourceFallback ?? DEFAULT_SOURCE_HANDLE_SIDE,
+  )
+  const targetPoint = getHandleFlowPosition(
+    target.worldX,
+    target.worldY,
+    target.worldW,
+    target.worldH,
+    options.targetHandle,
+    options.targetFallback ?? DEFAULT_TARGET_HANDLE_SIDE,
+  )
+  const dx = Math.abs(targetPoint.x - sourcePoint.x)
+  const dy = Math.abs(targetPoint.y - sourcePoint.y)
+  const sourceStem = Math.max(
+    (sourcePoint.side === 'left' || sourcePoint.side === 'right' ? dx : dy) * 0.5,
+    (sourcePoint.side === 'left' || sourcePoint.side === 'right' ? source.worldW : source.worldH) * 0.5,
+  )
+  const targetStem = Math.max(
+    (targetPoint.side === 'left' || targetPoint.side === 'right' ? dx : dy) * 0.5,
+    (targetPoint.side === 'left' || targetPoint.side === 'right' ? target.worldW : target.worldH) * 0.5,
+  )
+  const cp1 = bezierControlPoint(sourcePoint, sourceStem)
+  const cp2 = bezierControlPoint(targetPoint, targetStem)
+
+  return {
+    midX: 0.125 * sourcePoint.x + 0.375 * cp1.x + 0.375 * cp2.x + 0.125 * targetPoint.x,
+    midY: 0.125 * sourcePoint.y + 0.375 * cp1.y + 0.375 * cp2.y + 0.125 * targetPoint.y,
+    tangentX: -0.75 * sourcePoint.x - 0.75 * cp1.x + 0.75 * cp2.x + 0.75 * targetPoint.x,
+    tangentY: -0.75 * sourcePoint.y - 0.75 * cp1.y + 0.75 * cp2.y + 0.75 * targetPoint.y,
+  }
+}
+
 function getDevicePixelRatio(): number {
   return typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
 }
@@ -536,9 +626,18 @@ export function drawVisibleDirectProxyBadges(
     const alpha = Math.min(source.renderAlpha, target.renderAlpha)
     if (alpha < 0.01) continue
 
-    const { sourcePoint, targetPoint } = getDirectAnchorPoints(source, target)
-    const midX = (sourcePoint.x + targetPoint.x) / 2
-    const midY = (sourcePoint.y + targetPoint.y) / 2
+    const sourceFallback = badge.details.connectors[0]?.connector.source_element_id === badge.sourceAnchorElementId
+      ? DEFAULT_SOURCE_HANDLE_SIDE
+      : DEFAULT_TARGET_HANDLE_SIDE
+    const targetFallback = badge.details.connectors[0]?.connector.target_element_id === badge.targetAnchorElementId
+      ? DEFAULT_TARGET_HANDLE_SIDE
+      : DEFAULT_SOURCE_HANDLE_SIDE
+    const { midX, midY, tangentX, tangentY } = getProxyBezierBadgeGeometry(source, target, {
+      sourceHandle: badge.sourceHandle,
+      targetHandle: badge.targetHandle,
+      sourceFallback,
+      targetFallback,
+    })
     const label = `+${badge.count}`
 
     ctx.save()
@@ -550,8 +649,8 @@ export function drawVisibleDirectProxyBadges(
       midY,
       badgeMetrics.worldW,
       badgeMetrics.worldH,
-      targetPoint.x - sourcePoint.x,
-      targetPoint.y - sourcePoint.y,
+      tangentX,
+      tangentY,
       occupiedLabelRects,
     )
     drawFixedScreenProxyBadge(