@tldiagram/core-ui 2.0.3 → 2.0.5

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

@@ -173,6 +173,7 @@ export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _d
         clientX: number;
         clientY: number;
     }) => void;
+    stableOnReconnectPick: (targetElementId: number) => Promise<boolean>;
     showAddingElementAt: (clientX: number, clientY: number, expandResults?: boolean, mode?: "add" | "connect", forceConnect?: boolean) => void;
     onNodesChange: (changes: NodeChange[]) => void;
     onEdgesChange: (changes: EdgeChange[]) => void;

package/dist/pages/ViewEditor/index.d.ts

@@ -1,7 +1,12 @@
 import type { CoreUISlots } from '../../slots';
 import 'reactflow/dist/style.css';
 import { type ViewEditorDemoOptions } from '../../demo/viewEditor';
-interface Props extends CoreUISlots {
+export interface ViewEditorPermissions {
+    canEdit?: boolean;
+    isOwner?: boolean;
+    isFreePlan?: boolean;
+}
+interface Props extends CoreUISlots, ViewEditorPermissions {
     demoOptions?: ViewEditorDemoOptions;
 }
 export default function ViewEditor(props: Props): import("react/jsx-runtime").JSX.Element;

package/dist/utils/string.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Truncates a string to a specified length and appends an ellipsis.
+ */
+export declare const truncate: (str: string, limit?: number) => string;

package/dist/utils/string.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/CrossBranchControls.tsx

@@ -1,9 +1,9 @@
+import { useEffect, useState } from 'react'
 import {
   Box,
   Button,
   HStack,
   Popover,
-  PopoverArrow,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -14,14 +14,30 @@ import {
   SliderTrack,
   Switch,
   Text,
+  useDisclosure,
   VStack,
 } from '@chakra-ui/react'
+import { FocusIcon, ChevronDownIcon } from './Icons'
 import {
   CROSS_BRANCH_CONNECTOR_BUDGET_MAX,
   CROSS_BRANCH_CONNECTOR_BUDGET_MIN,
 } from '../crossBranch/types'
 import type { CrossBranchConnectorPriority, CrossBranchContextSettings } from '../crossBranch/types'
 
+const DENSITY_STOPS = [
+  { value: -2, label: 'Quiet', budget: CROSS_BRANCH_CONNECTOR_BUDGET_MIN },
+  { value: -1, label: 'Lean', budget: 25 },
+  { value: 0, label: 'Normal', budget: 50 },
+  { value: 1, label: 'Rich', budget: 100 },
+  { value: 2, label: 'Full', budget: CROSS_BRANCH_CONNECTOR_BUDGET_MAX },
+] as const
+
+function densityFromBudget(budget: number) {
+  return DENSITY_STOPS.reduce((closest, stop) => (
+    Math.abs(stop.budget - budget) < Math.abs(closest.budget - budget) ? stop : closest
+  ), DENSITY_STOPS[0]).value
+}
+
 interface Props {
   settings: CrossBranchContextSettings
   onEnabledChange: (enabled: boolean) => void
@@ -38,92 +54,193 @@ export default function CrossBranchControls({
   label = 'Cross-Branch',
 }: Props) {
   const connectorBudget = settings.connectorBudget
+  const { isOpen, onClose, onToggle } = useDisclosure()
+  const [draftDensityLevel, setDraftDensityLevel] = useState<number>(() => densityFromBudget(connectorBudget))
+  const activeDensity = DENSITY_STOPS.find((stop) => stop.value === draftDensityLevel) ?? DENSITY_STOPS[2]
+
+  useEffect(() => {
+    setDraftDensityLevel(densityFromBudget(connectorBudget))
+  }, [connectorBudget])
 
   return (
-    <Popover placement="top-start" isLazy>
+    <Popover isOpen={isOpen} onClose={onClose} placement="top-start" isLazy closeOnBlur>
       <PopoverTrigger>
         <Button
           variant="ghost"
           h="28px"
           px={2.5}
-          color={settings.enabled ? 'var(--accent)' : 'gray.300'}
+          color={isOpen || settings.enabled ? 'var(--accent)' : 'gray.300'}
           bg={settings.enabled ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
           _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+          onClick={onToggle}
+          aria-label={`Open ${label} filters`}
         >
           <HStack spacing={1.5}>
-            <Box w="7px" h="7px" rounded="full" bg={settings.enabled ? 'var(--accent)' : 'gray.500'} />
-            <Text fontSize="11px" fontWeight="normal">{label}</Text>
-            <Text fontSize="10px" color="gray.400">{settings.enabled ? connectorBudget : 'Off'}</Text>
+            <FocusIcon />
+            <Text fontSize="11px" fontWeight={settings.enabled ? 'semibold' : 'normal'}>{label}</Text>
+            <Text fontSize="10px" color={settings.enabled ? 'var(--accent)' : 'gray.400'}>
+              {settings.enabled ? activeDensity.label : 'Off'}
+            </Text>
+            <ChevronDownIcon size={10} strokeWidth={3.5} />
           </HStack>
         </Button>
       </PopoverTrigger>
       <Portal>
         <PopoverContent
-          bg="glass.bg"
-          backdropFilter="blur(16px)"
-          borderColor="glass.border"
-          boxShadow="panel"
+          bg="linear-gradient(180deg, rgba(var(--bg-main-rgb), 0.98) 0%, rgba(var(--bg-main-rgb), 0.92) 100%)"
+          backdropFilter="blur(22px)"
+          borderColor="whiteAlpha.100"
+          boxShadow="0 18px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04)"
           borderRadius="lg"
-          width="240px"
+          width="292px"
           _focus={{ boxShadow: 'none' }}
         >
-          <PopoverArrow bg="glass.bg" />
           <PopoverBody p={3}>
             <VStack align="stretch" spacing={3}>
-              <HStack justify="space-between">
-                <Text fontSize="xs" fontWeight="600" color="white">Show cross-branch context</Text>
-                <Switch isChecked={settings.enabled} onChange={(event) => onEnabledChange(event.target.checked)} colorScheme="blue" />
+              <HStack
+                justify="space-between"
+                spacing={3}
+                px={2.5}
+                py={2}
+                rounded="md"
+                bg={settings.enabled ? 'rgba(var(--accent-rgb), 0.10)' : 'whiteAlpha.50'}
+                border="1px solid"
+                borderColor={settings.enabled ? 'rgba(var(--accent-rgb), 0.22)' : 'whiteAlpha.100'}
+              >
+                <HStack spacing={2.5} minW={0}>
+                  <Box color={settings.enabled ? 'var(--accent)' : 'gray.400'} flexShrink={0}>
+                    <FocusIcon />
+                  </Box>
+                  <Box minW={0}>
+                    <Text fontSize="xs" fontWeight="semibold" color="whiteAlpha.900">Cross-branch context</Text>
+                    <Text fontSize="10px" color="whiteAlpha.600" noOfLines={1}>
+                      {settings.enabled ? 'Show relationships across branches' : 'Branch context is hidden'}
+                    </Text>
+                  </Box>
+                </HStack>
+                <Switch
+                  size="sm"
+                  isChecked={settings.enabled}
+                  onChange={(event) => onEnabledChange(event.target.checked)}
+                  colorScheme="teal"
+                  flexShrink={0}
+                  aria-label="Toggle cross-branch context"
+                />
               </HStack>
-              <Box opacity={settings.enabled ? 1 : 0.4}>
-                <Text fontSize="10px" fontWeight="700" color="gray.400" letterSpacing="0.08em" textTransform="uppercase" mb={2}>
-                  Priority
-                </Text>
-                <HStack spacing={1} bg="whiteAlpha.100" borderRadius="md" p={1}>
-                  {(['external', 'internal'] as const).map((priority) => {
-                    const active = settings.connectorPriority === priority
-                    return (
-                      <Button
-                        key={priority}
-                        size="xs"
-                        h="24px"
-                        flex={1}
-                        isDisabled={!settings.enabled}
-                        variant="ghost"
-                        bg={active ? 'rgba(var(--accent-rgb), 0.18)' : 'transparent'}
-                        color={active ? 'var(--accent)' : 'gray.300'}
-                        _hover={{ bg: active ? 'rgba(var(--accent-rgb), 0.22)' : 'whiteAlpha.100' }}
-                        onClick={() => onPriorityChange(priority)}
-                      >
-                        {priority === 'external' ? 'External' : 'Internal'}
-                      </Button>
-                    )
-                  })}
+
+              <Box
+                opacity={settings.enabled ? 1 : 0.45}
+                px={2.5}
+                py={2.5}
+                rounded="md"
+                bg="whiteAlpha.50"
+                border="1px solid"
+                borderColor="whiteAlpha.100"
+              >
+                <HStack justify="space-between" mb={2}>
+                  <Box>
+                    <Text fontSize="xs" fontWeight="semibold" color="whiteAlpha.900">Priority</Text>
+                    <Text fontSize="10px" color="whiteAlpha.600">Choose connector type to prioritize</Text>
+                  </Box>
+                </HStack>
+                <HStack spacing={1} bg="rgba(255,255,255,0.06)" borderRadius="md" p={1}>
+                  {(['external', 'internal'] as const).map((priority) => (
+                    <Button
+                      key={priority}
+                      size="xs"
+                      h="24px"
+                      flex={1}
+                      isDisabled={!settings.enabled}
+                      variant="ghost"
+                      bg={settings.connectorPriority === priority ? 'rgba(var(--accent-rgb), 0.18)' : 'transparent'}
+                      color={settings.connectorPriority === priority ? 'var(--accent)' : 'gray.300'}
+                      _hover={{ bg: settings.connectorPriority === priority ? 'rgba(var(--accent-rgb), 0.22)' : 'whiteAlpha.100' }}
+                      onClick={() => onPriorityChange(priority)}
+                    >
+                      {priority === 'external' ? 'External' : 'Internal'}
+                    </Button>
+                  ))}
                 </HStack>
               </Box>
-              <Box opacity={settings.enabled ? 1 : 0.4}>
-                <HStack justify="space-between" mb={2}>
-                  <Text fontSize="10px" fontWeight="700" color="gray.400" letterSpacing="0.08em" textTransform="uppercase">
-                    Connector Budget
+
+              <Box
+                opacity={settings.enabled ? 1 : 0.45}
+                px={2.5}
+                py={2.5}
+                rounded="md"
+                bg="whiteAlpha.50"
+                border="1px solid"
+                borderColor="whiteAlpha.100"
+              >
+                <HStack justify="space-between" mb={2.5}>
+                  <Box>
+                    <Text fontSize="xs" fontWeight="semibold" color="whiteAlpha.900">Density</Text>
+                  </Box>
+                  <Text
+                    fontSize="10px"
+                    fontWeight="bold"
+                    color="var(--accent)"
+                    bg="rgba(var(--accent-rgb), 0.10)"
+                    border="1px solid"
+                    borderColor="rgba(var(--accent-rgb), 0.18)"
+                    rounded="full"
+                    px={2}
+                    py={0.5}
+                  >
+                    {activeDensity.label}
                   </Text>
-                  <Text fontSize="xs" color="gray.300">{connectorBudget}</Text>
-                </HStack>
-                <Slider
-                  isDisabled={!settings.enabled}
-                  min={CROSS_BRANCH_CONNECTOR_BUDGET_MIN}
-                  max={CROSS_BRANCH_CONNECTOR_BUDGET_MAX}
-                  step={1}
-                  value={connectorBudget}
-                  onChange={onBudgetChange}
-                >
-                  <SliderTrack bg="whiteAlpha.200">
-                    <SliderFilledTrack bg="var(--accent)" />
-                  </SliderTrack>
-                  <SliderThumb boxSize={4} />
-                </Slider>
-                <HStack justify="space-between" mt={1}>
-                  <Text fontSize="10px" color="gray.500">{CROSS_BRANCH_CONNECTOR_BUDGET_MIN}</Text>
-                  <Text fontSize="10px" color="gray.500">{CROSS_BRANCH_CONNECTOR_BUDGET_MAX}</Text>
                 </HStack>
+                <Box px={1} pt={1} pb={0.5}>
+                  <Slider
+                    aria-label="Branch density"
+                    isDisabled={!settings.enabled}
+                    min={-2}
+                    max={2}
+                    step={1}
+                    value={draftDensityLevel}
+                    onChange={setDraftDensityLevel}
+                    onChangeEnd={(value) => {
+                      setDraftDensityLevel(value)
+                      const next = DENSITY_STOPS.find((stop) => stop.value === value) ?? DENSITY_STOPS[2]
+                      onBudgetChange(next.budget)
+                    }}
+                    focusThumbOnChange={false}
+                  >
+                    <SliderTrack h="4px" bg="whiteAlpha.200">
+                      <SliderFilledTrack bg="var(--accent)" />
+                    </SliderTrack>
+                    {DENSITY_STOPS.map((stop) => (
+                      <Box
+                        key={stop.value}
+                        position="absolute"
+                        left={`${((stop.value + 2) / 4) * 100}%`}
+                        top="50%"
+                        transform="translate(-50%, -50%)"
+                        w={stop.value === draftDensityLevel ? '6px' : '2px'}
+                        h={stop.value === draftDensityLevel ? '6px' : '10px'}
+                        rounded="full"
+                        bg={draftDensityLevel >= stop.value ? 'var(--accent)' : 'whiteAlpha.500'}
+                        pointerEvents="none"
+                      />
+                    ))}
+                    <SliderThumb boxSize="14px" bg="white" border="2px solid" borderColor="var(--accent)" />
+                  </Slider>
+                  <HStack justify="space-between" mt={2} px={0.5}>
+                    {DENSITY_STOPS.map((stop) => (
+                      <Text
+                        key={stop.value}
+                        fontSize="9px"
+                        fontWeight={stop.value === draftDensityLevel ? 'bold' : 'medium'}
+                        color={stop.value === draftDensityLevel ? 'whiteAlpha.900' : 'whiteAlpha.500'}
+                      >
+                        {stop.label}
+                      </Text>
+                    ))}
+                  </HStack>
+                  <Text fontSize="10px" color="whiteAlpha.500" mt={2}>
+                    Connector budget {connectorBudget}
+                  </Text>
+                </Box>
               </Box>
             </VStack>
           </PopoverBody>

package/src/components/FloatingEdge.tsx

@@ -1,22 +1,5 @@
 import { memo, useState } from 'react'
-import { useStore, getStraightPath, type EdgeProps } from 'reactflow'
-
-function getNodeBorderPoint(
-  node: { positionAbsolute?: { x: number; y: number }; width?: number | null; height?: number | null },
-  targetCenter: { x: number; y: number }
-) {
-  const w = (node.width ?? 0) / 2
-  const h = (node.height ?? 0) / 2
-  const cx = (node.positionAbsolute?.x ?? 0) + w
-  const cy = (node.positionAbsolute?.y ?? 0) + h
-  const dx = targetCenter.x - cx
-  const dy = targetCenter.y - cy
-  if (dx === 0 && dy === 0) return { x: cx, y: cy }
-  const scaleX = dx !== 0 ? Math.abs(w / dx) : Infinity
-  const scaleY = dy !== 0 ? Math.abs(h / dy) : Infinity
-  const scale = Math.min(scaleX, scaleY)
-  return { x: cx + dx * scale, y: cy + dy * scale }
-}
+import { useStore, type Edge, type EdgeProps } from 'reactflow'
 
 export interface FloatingConnectorData {
   color: string
@@ -24,15 +7,87 @@ export interface FloatingConnectorData {
   dashed?: boolean
 }
 
+type FlowNode = {
+  positionAbsolute?: { x: number; y: number }
+  width?: number | null
+  height?: number | null
+}
+
+type Point = { x: number; y: number }
+type RouteDirection = 'down' | 'up'
+
+interface OrthogonalRoute {
+  source: Point
+  target: Point
+  busY: number
+  direction: RouteDirection
+}
+
+interface BundleMember {
+  id: string
+  target: Point
+}
+
+const GRID_BUNDLE_OFFSET = 52
+const MIN_BUNDLE_OFFSET = 26
+
+function nodeCenter(node: FlowNode) {
+  return {
+    x: (node.positionAbsolute?.x ?? 0) + (node.width ?? 0) / 2,
+    y: (node.positionAbsolute?.y ?? 0) + (node.height ?? 0) / 2,
+  }
+}
+
+function getOrthogonalRoute(sourceNode: FlowNode, targetNode: FlowNode): OrthogonalRoute {
+  const sourceCenter = nodeCenter(sourceNode)
+  const targetCenter = nodeCenter(targetNode)
+  const sourceHeight = sourceNode.height ?? 0
+  const targetHeight = targetNode.height ?? 0
+  const direction: RouteDirection = targetCenter.y >= sourceCenter.y ? 'down' : 'up'
+  const source = {
+    x: sourceCenter.x,
+    y: direction === 'down'
+      ? (sourceNode.positionAbsolute?.y ?? 0) + sourceHeight
+      : (sourceNode.positionAbsolute?.y ?? 0),
+  }
+  const target = {
+    x: targetCenter.x,
+    y: direction === 'down'
+      ? (targetNode.positionAbsolute?.y ?? 0)
+      : (targetNode.positionAbsolute?.y ?? 0) + targetHeight,
+  }
+  const availableGap = Math.abs(target.y - source.y)
+  const offset = Math.max(MIN_BUNDLE_OFFSET, Math.min(GRID_BUNDLE_OFFSET, availableGap / 2))
+
+  return {
+    source,
+    target,
+    direction,
+    busY: direction === 'down' ? source.y + offset : source.y - offset,
+  }
+}
+
+function linePath(points: Point[]) {
+  if (points.length === 0) return ''
+  return points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x},${point.y}`).join(' ')
+}
+
+function edgeStyleKey(edge: Edge<FloatingConnectorData>) {
+  return `${edge.data?.dashed ? 'dashed' : 'solid'}:${edge.data?.color ?? ''}`
+}
+
 function FloatingConnector({
+  id,
   source,
   target,
   data,
   selected,
 }: EdgeProps<FloatingConnectorData>) {
   const [hovered, setHovered] = useState(false)
-  const sourceNode = useStore((s) => s.nodeInternals.get(source))
-  const targetNode = useStore((s) => s.nodeInternals.get(target))
+  const edges = useStore((s) => s.edges as Edge<FloatingConnectorData>[])
+  const nodeInternals = useStore((s) => s.nodeInternals)
+  const sourceNode = nodeInternals.get(source)
+  const targetNode = nodeInternals.get(target)
 
   if (
     !sourceNode?.positionAbsolute || !targetNode?.positionAbsolute ||
@@ -40,27 +95,75 @@ function FloatingConnector({
     !isFinite(targetNode.positionAbsolute.x) || !isFinite(targetNode.positionAbsolute.y)
   ) return null
 
-  const sourceCx = (sourceNode.positionAbsolute.x ?? 0) + (sourceNode.width ?? 0) / 2
-  const sourceCy = (sourceNode.positionAbsolute.y ?? 0) + (sourceNode.height ?? 0) / 2
-  const targetCx = (targetNode.positionAbsolute.x ?? 0) + (targetNode.width ?? 0) / 2
-  const targetCy = (targetNode.positionAbsolute.y ?? 0) + (targetNode.height ?? 0) / 2
+  const route = getOrthogonalRoute(sourceNode, targetNode)
+  const styleKey = `${data?.dashed ? 'dashed' : 'solid'}:${data?.color ?? ''}`
+  const members = edges
+    .filter((edge): edge is Edge<FloatingConnectorData> => (
+      edge.type === 'floating' &&
+      edge.source === source &&
+      edgeStyleKey(edge) === styleKey
+    ))
+    .map((edge) => {
+      const edgeTargetNode = nodeInternals.get(edge.target)
+      if (!edgeTargetNode?.positionAbsolute) return null
+      const edgeRoute = getOrthogonalRoute(sourceNode, edgeTargetNode)
+      if (edgeRoute.direction !== route.direction) return null
+      return { id: edge.id, target: edgeRoute.target }
+    })
+    .filter((member): member is BundleMember => member !== null)
+    .sort((a, b) => a.target.x - b.target.x || a.target.y - b.target.y || a.id.localeCompare(b.id))
 
-  const sourcePoint = getNodeBorderPoint(sourceNode, { x: targetCx, y: targetCy })
-  const targetPoint = getNodeBorderPoint(targetNode, { x: sourceCx, y: sourceCy })
-
-  const [connectorPath] = getStraightPath({
-    sourceX: sourcePoint.x,
-    sourceY: sourcePoint.y,
-    targetX: targetPoint.x,
-    targetY: targetPoint.y,
-  })
+  const isBundleRepresentative = members[0]?.id === id
+  const isBundled = members.length > 1
+  const busXs = isBundled
+    ? [route.source.x, ...members.map((member) => member.target.x)]
+    : [route.source.x, route.target.x]
+  const busStartX = Math.min(...busXs)
+  const busEndX = Math.max(...busXs)
+  const connectorPath = isBundled
+    ? linePath([
+      { x: route.target.x, y: route.busY },
+      route.target,
+    ])
+    : linePath([
+      route.source,
+      { x: route.source.x, y: route.busY },
+      { x: route.target.x, y: route.busY },
+      route.target,
+    ])
+  const sharedPath = isBundled && isBundleRepresentative
+    ? linePath([
+      route.source,
+      { x: route.source.x, y: route.busY },
+      { x: busStartX, y: route.busY },
+      { x: busEndX, y: route.busY },
+    ])
+    : ''
+  const hitPath = sharedPath ? `${sharedPath} ${connectorPath}` : connectorPath
 
   const color = data?.color ?? '#718096'
   const isPortal = data?.dashed ?? false
   const active = hovered || !!selected
+  const strokeWidth = isBundled && isBundleRepresentative
+    ? active ? 1.8 : 1.35
+    : active ? 1.5 : 1
 
   return (
     <g>
+      {sharedPath && (
+        <path
+          d={sharedPath}
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={isPortal ? '1.5 7' : undefined}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity={active ? 0.9 : 0.62}
+          style={{ transition: 'opacity 0.15s ease, stroke-width 0.15s ease' }}
+        />
+      )}
+
       {/* Main stroke */}
       {isPortal ? (
         /* Portal: fine rounded dots - distinct from hierarchy */
@@ -68,9 +171,10 @@ function FloatingConnector({
           d={connectorPath}
           fill="none"
           stroke={color}
-          strokeWidth={active ? 1.5 : 1}
+          strokeWidth={strokeWidth}
           strokeDasharray="1.5 7"
           strokeLinecap="round"
+          strokeLinejoin="round"
           opacity={active ? 0.9 : 0.6}
           style={{ transition: 'opacity 0.15s ease, stroke-width 0.15s ease' }}
         />
@@ -80,17 +184,19 @@ function FloatingConnector({
           d={connectorPath}
           fill="none"
           stroke={color}
-          strokeWidth={active ? 1.5 : 1}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
           opacity={active ? 0.85 : 0.6}
           style={{ transition: 'opacity 0.15s ease, stroke-width 0.15s ease' }}
         />
       )}
 
       {/* Source terminus dot - hierarchy only, signals the origin node */}
-      {!isPortal && (
+      {!isPortal && (!isBundled || isBundleRepresentative) && (
         <circle
-          cx={sourcePoint.x}
-          cy={sourcePoint.y}
+          cx={route.source.x}
+          cy={route.source.y}
           r={active ? 2.5 : 2}
           fill={color}
           opacity={active ? 0.85 : 0.55}
@@ -100,7 +206,7 @@ function FloatingConnector({
 
       {/* Wide transparent hit area for hover detection */}
       <path
-        d={connectorPath}
+        d={hitPath}
         fill="none"
         stroke="transparent"
         strokeWidth={16}

package/src/components/ProxyConnectorPanel.tsx

@@ -6,6 +6,7 @@ import PanelHeader from './PanelHeader'
 import { ChevronRightIcon, NavigationIcon, TrashIcon, EditIcon } from './Icons'
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 import type { Connector } from '../types'
+import { truncate } from '../utils/string'
 
 interface Props {
   isOpen: boolean
@@ -83,11 +84,11 @@ export default function ProxyConnectorPanel({
                           <VStack align="start" spacing={1} flex={1}>
                             <HStack spacing={2}>
                               <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                                {leaf.source.actualElementName}
+                                {truncate(leaf.source.actualElementName)}
                               </Text>
                               <Icon as={ChevronRightIcon} color="whiteAlpha.400" />
                               <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                                {leaf.target.actualElementName}
+                                {truncate(leaf.target.actualElementName)}
                               </Text>
                             </HStack>