@tldiagram/core-ui 1.87.0

package/src/components/ContextNeighborElement.tsx

@@ -0,0 +1,282 @@
+import { memo, useEffect, useMemo, useState } from 'react'
+import { Handle, Position } from 'reactflow'
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  Portal,
+  Tag,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, LinkIcon } from '@chakra-ui/icons'
+import type { PlacedElement } from '../types'
+import { TYPE_COLORS } from '../types'
+import { resolveIconPath } from '../utils/url'
+import { ElementBody } from './NodeBody'
+import { ElementContainer } from './NodeContainer'
+
+interface ContextNeighborData {
+  element_id: number
+  name: string
+  kind: string | null
+  description: string | null
+  technology: string | null
+  logo_url: string | null
+  technology_connectors: PlacedElement['technology_connectors']
+  ownerViewIds: number[]
+  ownerViewNames: string[]
+  commonAncestorViewId: number | null
+  commonAncestorViewName: string | null
+  connectorCount: number
+  onNavigateToView: (viewId: number) => void
+  onSelectDetails?: () => void
+  isCanvasMoving?: boolean
+  isGroupAnchor?: boolean
+  groupChildCount?: number
+  isGroupExpanded?: boolean
+  onToggleGroup?: () => void
+  side?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+interface Props {
+  data: ContextNeighborData
+}
+
+function ContextNeighborNode({ data }: Props) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  useEffect(() => {
+    if (data.isCanvasMoving) setIsHovered(false)
+  }, [data.isCanvasMoving])
+
+  const color = TYPE_COLORS[data.kind ?? ''] ?? 'gray'
+
+  const logoUrl = useMemo(() => {
+    if (data.logo_url) return resolveIconPath(data.logo_url)
+    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
+    if (!selected?.slug) return undefined
+    return resolveIconPath(`/icons/${selected.slug}.png`)
+  }, [data.logo_url, data.technology_connectors])
+
+  const primaryOwnerViewId = data.ownerViewIds[0] ?? data.commonAncestorViewId ?? null
+  const isGroupAnchor = data.isGroupAnchor ?? false
+  const groupChildCount = data.groupChildCount ?? 0
+  const isGroupExpanded = data.isGroupExpanded ?? false
+  const side = data.side ?? 'right'
+
+  // Position chevron just past the visual node edge (node is scale(0.5) with center origin,
+  // so the visual edge is at 75% of the layout box dimension on the outward side).
+  const chevronStyle = (() => {
+    switch (side) {
+      case 'right': return { left: 'calc(75% + 6px)', top: '50%', transform: 'translateY(-50%)' }
+      case 'left':  return { right: 'calc(75% + 6px)', top: '50%', transform: 'translateY(-50%)' }
+      case 'bottom': return { top: 'calc(75% + 6px)', left: '50%', transform: 'translateX(-50%)' }
+      case 'top':   return { bottom: 'calc(75% + 6px)', left: '50%', transform: 'translateX(-50%)' }
+    }
+  })()
+
+  const ChevronExpandIcon = (() => {
+    switch (side) {
+      case 'right':  return isGroupExpanded ? ChevronLeftIcon  : ChevronRightIcon
+      case 'left':   return isGroupExpanded ? ChevronRightIcon : ChevronLeftIcon
+      case 'bottom': return isGroupExpanded ? ChevronUpIcon    : ChevronDownIcon
+      case 'top':    return isGroupExpanded ? ChevronDownIcon  : ChevronUpIcon
+    }
+  })()
+
+  return (
+    <Box pointerEvents="none" position="relative">
+      <Handle type="source" position={Position.Top} id="top" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+      <Handle type="source" position={Position.Bottom} id="bottom" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+      <Handle type="source" position={Position.Left} id="left" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+      <Handle type="source" position={Position.Right} id="right" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+      <Handle type="target" position={Position.Top} id="top" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+      <Handle type="target" position={Position.Bottom} id="bottom" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+      <Handle type="target" position={Position.Left} id="left" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+      <Handle type="target" position={Position.Right} id="right" style={{ opacity: 0, pointerEvents: 'none' }} isConnectable={false} />
+
+      <Popover isOpen={isHovered && !data.isCanvasMoving} placement="right-start" closeOnBlur={false} gutter={12} isLazy>
+        <PopoverTrigger>
+          <Box transform="scale(0.5)" transformOrigin="center center">
+            <Box position="relative">
+              {/* Transparent ghost cards indicating a collapsed stack */}
+              {isGroupAnchor && !isGroupExpanded && groupChildCount > 0 && (
+                <>
+                  <Box
+                    position="absolute"
+                    top="10px"
+                    left="10px"
+                    right="-10px"
+                    bottom="-10px"
+                    borderRadius="md"
+                    border="1px solid"
+                    borderColor="whiteAlpha.200"
+                    zIndex={-2}
+                  />
+                  <Box
+                    position="absolute"
+                    top="5px"
+                    left="5px"
+                    right="-5px"
+                    bottom="-5px"
+                    borderRadius="md"
+                    border="1px solid"
+                    borderColor="whiteAlpha.300"
+                    zIndex={-1}
+                  />
+                </>
+              )}
+              <ElementContainer
+                minW="180px"
+                maxW="230px"
+                cursor={data.onSelectDetails || primaryOwnerViewId ? 'pointer' : 'default'}
+                pointerEvents="auto"
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                onClick={() => {
+                  if (data.onSelectDetails) {
+                    data.onSelectDetails()
+                    return
+                  }
+                  if (primaryOwnerViewId) data.onNavigateToView(primaryOwnerViewId)
+                }}
+                opacity={0.82}
+                _hover={{ opacity: 1, transform: 'scale(1.05)' }}
+                transition="all 0.2s"
+                bg="transparent"
+              >
+                <ElementBody
+                  name={data.name}
+                  type={data.kind ?? ''}
+                  logoUrl={logoUrl}
+                  nameSize="xl"
+                  minH="85px"
+                  pt={2}
+                  pb={2}
+                />
+              </ElementContainer>
+            </Box>
+          </Box>
+        </PopoverTrigger>
+
+        <Portal>
+          <PopoverContent
+            bg="gray.900"
+            borderColor="whiteAlpha.300"
+            boxShadow="2xl"
+            width="300px"
+            _focus={{ boxShadow: 'none' }}
+            pointerEvents="auto"
+          >
+            <PopoverArrow bg="gray.900" />
+            <PopoverHeader borderBottom="1px solid" borderColor="whiteAlpha.200" px={4} py={3}>
+              <HStack spacing={3}>
+                {logoUrl && (
+                  <Box flexShrink={0}>
+                    <Box as="img" src={logoUrl} w="24px" h="24px" objectFit="contain" />
+                  </Box>
+                )}
+                <VStack align="start" spacing={0} flex={1} overflow="hidden">
+                  <Text fontWeight="600" fontSize="sm" isTruncated width="100%" color="white">
+                    {data.name}
+                  </Text>
+                  <Tag colorScheme={color} variant="subtle" fontSize="2xs">
+                    {data.kind || 'branch'}
+                  </Tag>
+                </VStack>
+                <Badge colorScheme="blue" variant="subtle">
+                  {data.connectorCount}
+                </Badge>
+              </HStack>
+            </PopoverHeader>
+            <PopoverBody px={4} py={3}>
+              <VStack align="start" spacing={3}>
+                {data.technology && (
+                  <Box>
+                    <Text color="gray.400" fontSize="xs" fontWeight="600" mb={0.5} letterSpacing="wider">TECHNOLOGY</Text>
+                    <Text fontSize="xs" color="gray.200">{data.technology}</Text>
+                  </Box>
+                )}
+                {data.description && (
+                  <Box>
+                    <Text color="gray.400" fontSize="xs" fontWeight="600" mb={0.5} letterSpacing="wider">DESCRIPTION</Text>
+                    <Text fontSize="xs" color="gray.200" noOfLines={4}>{data.description}</Text>
+                  </Box>
+                )}
+                <Box>
+                  <Text color="gray.400" fontSize="xs" fontWeight="600" mb={0.5} letterSpacing="wider">BRANCH CONTEXT</Text>
+                  <Text fontSize="xs" color="gray.200">
+                    {data.commonAncestorViewName
+                      ? `Branch diverges around ${data.commonAncestorViewName}.`
+                      : 'Branch lives outside the current visible scope.'}
+                  </Text>
+                </Box>
+                <Divider borderColor="whiteAlpha.200" />
+                <VStack align="stretch" spacing={2} width="full">
+                  {data.ownerViewIds.slice(0, 4).map((viewId, index) => (
+                    <Button
+                      key={`${viewId}-${index}`}
+                      size="xs"
+                      justifyContent="space-between"
+                      variant="ghost"
+                      color="gray.200"
+                      _hover={{ bg: 'whiteAlpha.100', color: 'white' }}
+                      rightIcon={<LinkIcon />}
+                      onClick={() => data.onNavigateToView(viewId)}
+                    >
+                      <Text fontSize="xs" isTruncated>{data.ownerViewNames[index] ?? `View ${viewId}`}</Text>
+                    </Button>
+                  ))}
+                </VStack>
+              </VStack>
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+
+      {/* Expand/collapse chevron positioned on the outward-facing side of the stack */}
+      {isGroupAnchor && groupChildCount > 0 && (
+        <Box
+          position="absolute"
+          {...chevronStyle}
+          pointerEvents="auto"
+          zIndex={10}
+        >
+          <Button
+            variant="unstyled"
+            display="inline-flex"
+            alignItems="center"
+            gap={0.5}
+            color="whiteAlpha.400"
+            _hover={{ color: 'whiteAlpha.700' }}
+            height="auto"
+            minW="auto"
+            p={0}
+            lineHeight={1}
+            transition="color 0.15s"
+            onClick={(e) => {
+              e.stopPropagation()
+              data.onToggleGroup?.()
+            }}
+          >
+            <ChevronExpandIcon boxSize={2} />
+            {!isGroupExpanded && (
+              <Text as="span" fontSize="8px" letterSpacing="0.02em">{groupChildCount}</Text>
+            )}
+          </Button>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default memo(ContextNeighborNode)

package/src/components/ContextStraightConnector.tsx

@@ -0,0 +1,144 @@
+import { memo } from 'react'
+import { EdgeProps, getStraightPath, useStore } from 'reactflow'
+
+function getIntersectionPoint(
+  nx: number, ny: number, nw: number, nh: number,
+  tx: number, ty: number, tw: number, th: number
+) {
+  // Center of node
+  const cx = nx + nw / 2
+  const cy = ny + nh / 2
+  // Center of target
+  const cx2 = tx + tw / 2
+  const cy2 = ty + th / 2
+
+  const dx = cx2 - cx
+  const dy = cy2 - cy
+
+  // Intersection with the boundary of node (nx, ny, nw, nh)
+  const hw = nw / 2
+  const hh = nh / 2
+
+  if (dx === 0 && dy === 0) return { x: cx, y: cy }
+
+  const tanTheta = Math.abs(dy / dx)
+  const boxRatio = hh / hw
+
+  let ix, iy
+  if (tanTheta < boxRatio) {
+    // Left or right border
+    ix = cx + Math.sign(dx) * hw
+    iy = cy + Math.sign(dx) * hw * (dy / dx)
+  } else {
+    // Top or bottom border
+    iy = cy + Math.sign(dy) * hh
+    ix = cx + Math.sign(dy) * hh * (dx / dy)
+  }
+
+  return { x: ix, y: iy }
+}
+function ContextStraightConnector({
+  id,
+  source,
+  target,
+  style,
+  markerEnd,
+  markerStart,
+  data,
+}: EdgeProps) {
+  const sourceNode = useStore((s) => s.nodeInternals.get(source))
+  const targetNode = useStore((s) => s.nodeInternals.get(target))
+
+  if (!sourceNode || !targetNode) {
+    return null
+  }
+
+  let sx = sourceNode.positionAbsolute?.x ?? sourceNode.position.x
+  let sy = sourceNode.positionAbsolute?.y ?? sourceNode.position.y
+  let sw = sourceNode.width ?? 0
+  let sh = sourceNode.height ?? 0
+
+  let tx = targetNode.positionAbsolute?.x ?? targetNode.position.x
+  let ty = targetNode.positionAbsolute?.y ?? targetNode.position.y
+  let tw = targetNode.width ?? 0
+  let th = targetNode.height ?? 0
+
+  if (!sw || !sh || !tw || !th) return null
+
+  if (sourceNode.type === 'contextNeighborNode') {
+    const scale = 0.5
+    sx = sx + sw * ((1 - scale) / 2)
+    sy = sy + sh * ((1 - scale) / 2)
+    sw = sw * scale
+    sh = sh * scale
+  }
+
+  if (targetNode.type === 'contextNeighborNode') {
+    const scale = 0.5
+    tx = tx + tw * ((1 - scale) / 2)
+    ty = ty + th * ((1 - scale) / 2)
+    tw = tw * scale
+    th = th * scale
+  }
+
+  // Shortest distance: from center of source to center of target, intersect with their borders.
+  const startPoint = getIntersectionPoint(sx, sy, sw, sh, tx, ty, tw, th)
+  const endPoint = getIntersectionPoint(tx, ty, tw, th, sx, sy, sw, sh)
+
+
+  let finalStartPoint = startPoint
+  let finalEndPoint = endPoint
+
+  const { sourceGroupIndex, sourceGroupCount, targetGroupIndex, targetGroupCount } = (data as {
+    sourceGroupIndex?: number; sourceGroupCount?: number;
+    targetGroupIndex?: number; targetGroupCount?: number;
+  }) || {}
+
+  const dx = endPoint.x - startPoint.x
+  const dy = endPoint.y - startPoint.y
+  const len = Math.hypot(dx, dy)
+  const PADDING = 12
+
+  if (len > 0) {
+    const nx = -dy / len
+    const ny = dx / len
+
+    if (typeof sourceGroupIndex === 'number' && typeof sourceGroupCount === 'number' && sourceGroupCount > 1) {
+      const offset = (sourceGroupIndex - (sourceGroupCount - 1) / 2) * PADDING
+      finalStartPoint = { x: startPoint.x + nx * offset, y: startPoint.y + ny * offset }
+    }
+
+    if (typeof targetGroupIndex === 'number' && typeof targetGroupCount === 'number' && targetGroupCount > 1) {
+      const offset = (targetGroupIndex - (targetGroupCount - 1) / 2) * PADDING
+      finalEndPoint = { x: endPoint.x + nx * offset, y: endPoint.y + ny * offset }
+    }
+  }
+
+
+  const [connectorPath] = getStraightPath({
+    sourceX: finalStartPoint.x,
+    sourceY: finalStartPoint.y,
+    targetX: finalEndPoint.x,
+    targetY: finalEndPoint.y,
+  })
+
+
+  return (
+    <>
+      <path
+        id={id}
+        className="react-flow__connector-path"
+        d={connectorPath}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        style={{
+          ...style,
+          pointerEvents: 'none',
+          strokeDasharray: '5,5',
+        }}
+      />
+    </>
+  )
+}
+
+export default memo(ContextStraightConnector)

package/src/components/CrossBranchControls.tsx

@@ -0,0 +1,105 @@
+import {
+  Box,
+  Button,
+  HStack,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+  Switch,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import { CROSS_BRANCH_DEPTH_ALL, CROSS_BRANCH_DEPTH_MAX, CROSS_BRANCH_DEPTH_MIN } from '../crossBranch/types'
+import type { CrossBranchContextSettings } from '../crossBranch/types'
+
+interface Props {
+  settings: CrossBranchContextSettings
+  onEnabledChange: (enabled: boolean) => void
+  onDepthChange: (depth: number) => void
+  label?: string
+}
+
+function depthLabel(depth: number) {
+  return depth >= CROSS_BRANCH_DEPTH_ALL ? 'All' : String(depth)
+}
+
+export default function CrossBranchControls({
+  settings,
+  onEnabledChange,
+  onDepthChange,
+  label = 'Cross-Branch',
+}: Props) {
+  return (
+    <Popover placement="top-start" isLazy>
+      <PopoverTrigger>
+        <Button
+          variant="ghost"
+          h="28px"
+          px={2.5}
+          color={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)' }}
+        >
+          <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 ? depthLabel(settings.depth) : 'Off'}</Text>
+          </HStack>
+        </Button>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent
+          bg="glass.bg"
+          backdropFilter="blur(16px)"
+          borderColor="glass.border"
+          boxShadow="panel"
+          borderRadius="lg"
+          width="240px"
+          _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>
+              <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">
+                    Descendant Depth
+                  </Text>
+                  <Text fontSize="xs" color="gray.300">{depthLabel(settings.depth)}</Text>
+                </HStack>
+                <Slider
+                  isDisabled={!settings.enabled}
+                  min={CROSS_BRANCH_DEPTH_MIN}
+                  max={CROSS_BRANCH_DEPTH_MAX}
+                  step={1}
+                  value={settings.depth}
+                  onChange={onDepthChange}
+                >
+                  <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">Near</Text>
+                  <Text fontSize="10px" color="gray.500">All</Text>
+                </HStack>
+              </Box>
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  )
+}