@tldiagram/core-ui 1.87.0

package/src/components/NodeHoverCard.tsx

@@ -0,0 +1,135 @@
+import { Box, Divider, Flex, HStack, Tag, Text, VStack } from '@chakra-ui/react'
+import { TYPE_COLORS, type PlacedElement } from '../types'
+
+interface Props {
+    data: PlacedElement & { hasChildLink?: boolean }
+    /** Bounding rect of the node element in screen (viewport) coordinates */
+    anchorRect: DOMRect
+}
+
+export default function NodeHoverCard({ data, anchorRect }: Props) {
+    const color = TYPE_COLORS[data.kind ?? ''] ?? 'gray'
+
+    // Position the card centred above the node using fixed coordinates so it
+    // escapes React Flow's stacking context and always renders on top.
+    const centreX = anchorRect.left + anchorRect.width / 2
+    const topY = anchorRect.top - 12   // 12px gap above the node
+
+    return (
+        <Box
+            position="fixed"
+            // Temporarily off-screen width to measure; real centering via transform
+            left={`${centreX}px`}
+            top={`${topY}px`}
+            transform="translate(-50%, -100%)"
+            zIndex={99999}
+            pointerEvents="none"
+            minW="220px"
+            maxW="300px"
+            // Soft Clay styles
+            bg="clay.bg"
+            border="1px solid rgba(255,255,255,0.08)"
+            rounded="xl"
+            boxShadow="clay-out"
+            px={4}
+            py={3}
+            // Fade-in animation
+            animation="nodeCardIn 0.15s ease-out"
+            sx={{
+                '@keyframes nodeCardIn': {
+                    from: { opacity: 0, transform: 'translate(-50%, calc(-100% + 6px))' },
+                    to: { opacity: 1, transform: 'translate(-50%, -100%)' },
+                },
+            }}
+        >
+            {/* Caret pointing down toward the node */}
+            <Box
+                position="absolute"
+                bottom="-6px"
+                left="50%"
+                transform="translateX(-50%)"
+                w={0}
+                h={0}
+                borderLeft="6px solid transparent"
+                borderRight="6px solid transparent"
+                borderTop="6px solid"
+                borderTopColor="clay.bg"
+            />
+
+            <VStack align="stretch" spacing={2}>
+                {/* Header: name + type badge */}
+                <Flex align="flex-start" justify="space-between" gap={2}>
+                    <Text
+                        fontSize="sm"
+                        fontWeight="semibold"
+                        color="gray.100"
+                        lineHeight="tight"
+                    >
+                        {data.name}
+                    </Text>
+                    <Tag
+                        size="sm"
+                        colorScheme={color}
+                        variant="subtle"
+                        flexShrink={0}
+                        fontSize="9px"
+                        textTransform="uppercase"
+                        letterSpacing="0.06em"
+                        mt="1px"
+                    >
+                        {data.kind}
+                    </Tag>
+                </Flex>
+
+                {/* Technology */}
+                {data.technology && (
+                    <Text fontSize="xs" color="gray.500">
+                        {data.technology}
+                    </Text>
+                )}
+
+                {/* Description */}
+                {data.description && (
+                    <>
+                        <Divider borderColor="rgba(255,255,255,0.06)" />
+                        <Text fontSize="xs" color="gray.400" noOfLines={4}>
+                            {data.description}
+                        </Text>
+                    </>
+                )}
+
+                {/* Tags */}
+                {data.tags && data.tags.length > 0 && (
+                    <HStack spacing={1} flexWrap="wrap">
+                        {data.tags.map((tag) => (
+                            <Tag
+                                key={tag}
+                                size="sm"
+                                variant="outline"
+                                colorScheme="gray"
+                                fontSize="9px"
+                                borderColor="rgba(255,255,255,0.1)"
+                                color="gray.500"
+                            >
+                                {tag}
+                            </Tag>
+                        ))}
+                    </HStack>
+                )}
+
+                {/* Child view hint */}
+                {data.hasChildLink && (
+                    <>
+                        <Divider borderColor="rgba(255,255,255,0.06)" />
+                        <Flex align="center" gap={1.5}>
+                            <Box w="5px" h="5px" rounded="full" bg="blue.400" opacity={0.8} />
+                            <Text fontSize="9px" color="blue.400" letterSpacing="0.04em">
+                                Has child view
+                            </Text>
+                        </Flex>
+                    </>
+                )}
+            </VStack>
+        </Box>
+    )
+}

package/src/components/PanelHeader.tsx

@@ -0,0 +1,36 @@
+import { CloseButton, Divider, HStack, Text } from '@chakra-ui/react'
+import type { ReactNode } from 'react'
+
+interface Props {
+  title: ReactNode
+  onClose?: () => void
+  hasCloseButton?: boolean
+}
+
+export default function PanelHeader({ title, onClose, hasCloseButton = true }: Props) {
+  return (
+    <>
+      <HStack
+        px={4}
+        pt={4}
+        pb={3}
+        justify="space-between"
+        flexShrink={0}
+        bgGradient="linear(to-b, whiteAlpha.50, transparent)"
+      >
+        <Text fontSize="xs" fontWeight="700" color="white" letterSpacing="0.02em" textTransform="uppercase">
+          {title}
+        </Text>
+        {hasCloseButton && onClose && (
+          <CloseButton
+            size="sm"
+            color="whiteAlpha.600"
+            _hover={{ color: 'white', bg: 'whiteAlpha.100' }}
+            onClick={onClose}
+          />
+        )}
+      </HStack>
+      <Divider borderColor="whiteAlpha.100" />
+    </>
+  )
+}

package/src/components/PanelUI.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Box } from '@chakra-ui/react'
+
+export function KbdHint({ children }: { children: string }) {
+  return (
+    <Box
+      as="span"
+      display="inline-flex"
+      alignItems="center"
+      justifyContent="center"
+      px={1.5}
+      py={0.5}
+      bg="whiteAlpha.300"
+      rounded="sm"
+      fontSize="8px"
+      fontWeight="bold"
+      color="whiteAlpha.900"
+      flexShrink={0}
+      ml={2}
+    >
+      {children}
+    </Box>
+  )
+}

package/src/components/ProxyConnectorEdge.tsx

@@ -0,0 +1,169 @@
+import { memo } from 'react'
+import { BaseEdge, EdgeLabelRenderer, useStore, type EdgeProps } from 'reactflow'
+import { useEdgeLabelLayout } from './ViewEditorEdgeLabelLayout'
+
+function getIntersectionPoint(
+  nx: number, ny: number, nw: number, nh: number,
+  tx: number, ty: number, tw: number, th: number,
+) {
+  const cx = nx + nw / 2
+  const cy = ny + nh / 2
+  const cx2 = tx + tw / 2
+  const cy2 = ty + th / 2
+  const dx = cx2 - cx
+  const dy = cy2 - cy
+  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
+
+  if (tanTheta < boxRatio) {
+    return {
+      x: cx + Math.sign(dx) * hw,
+      y: cy + Math.sign(dx) * hw * (dy / dx),
+    }
+  }
+
+  return {
+    y: cy + Math.sign(dy) * hh,
+    x: cx + Math.sign(dy) * hh * (dx / dy),
+  }
+}
+
+function scaleContextNodeBox(node: {
+  positionAbsolute?: { x: number; y: number }
+  position: { x: number; y: number }
+  width?: number | null
+  height?: number | null
+  type?: string
+} | undefined) {
+  let x = node?.positionAbsolute?.x ?? node?.position.x ?? 0
+  let y = node?.positionAbsolute?.y ?? node?.position.y ?? 0
+  let w = node?.width ?? 0
+  let h = node?.height ?? 0
+
+  if (node?.type === 'contextNeighborNode') {
+    const scale = 0.5
+    x += w * ((1 - scale) / 2)
+    y += h * ((1 - scale) / 2)
+    w *= scale
+    h *= scale
+  }
+
+  return { x, y, w, h }
+}
+
+function ProxyConnectorEdge({ id, source, target, selected, style }: EdgeProps) {
+  const sourceNode = useStore((s) => s.nodeInternals.get(source))
+  const targetNode = useStore((s) => s.nodeInternals.get(target))
+  const edge = useStore((s) => s.edges.find((candidate) => candidate.id === id))
+  const sourceBox = scaleContextNodeBox(sourceNode)
+  const targetBox = scaleContextNodeBox(targetNode)
+  const hasBoxes = !!(sourceBox.w && sourceBox.h && targetBox.w && targetBox.h)
+  const start = hasBoxes
+    ? getIntersectionPoint(sourceBox.x, sourceBox.y, sourceBox.w, sourceBox.h, targetBox.x, targetBox.y, targetBox.w, targetBox.h)
+    : { x: 0, y: 0 }
+  const end = hasBoxes
+    ? getIntersectionPoint(targetBox.x, targetBox.y, targetBox.w, targetBox.h, sourceBox.x, sourceBox.y, sourceBox.w, sourceBox.h)
+    : { x: 1, y: 0 }
+
+  let finalStart = start
+  let finalEnd = end
+
+  const { sourceGroupIndex, sourceGroupCount, targetGroupIndex, targetGroupCount } = (edge?.data as {
+    sourceGroupIndex?: number; sourceGroupCount?: number;
+    targetGroupIndex?: number; targetGroupCount?: number;
+  }) || {}
+
+  const dx = end.x - start.x
+  const dy = end.y - start.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
+      finalStart = { x: start.x + nx * offset, y: start.y + ny * offset }
+    }
+
+    if (typeof targetGroupIndex === 'number' && typeof targetGroupCount === 'number' && targetGroupCount > 1) {
+      const offset = (targetGroupIndex - (targetGroupCount - 1) / 2) * PADDING
+      finalEnd = { x: end.x + nx * offset, y: end.y + ny * offset }
+    }
+  }
+
+
+  const labelLayout = useEdgeLabelLayout({
+    id,
+    preferredX: (finalStart.x + finalEnd.x) / 2,
+    preferredY: (finalStart.y + finalEnd.y) / 2,
+    width: 24,
+    height: 24,
+    dx: finalEnd.x - finalStart.x,
+    dy: finalEnd.y - finalStart.y,
+    alongLineOnly: true,
+  })
+
+  if (!sourceNode || !targetNode) return null
+  if (!sourceBox.w || !sourceBox.h || !targetBox.w || !targetBox.h) return null
+
+  const path = `M ${finalStart.x},${finalStart.y} L ${finalEnd.x},${finalEnd.y}`
+
+  const count = edge?.data && typeof (edge.data as { details?: { count?: number } }).details?.count === 'number'
+    ? (edge.data as { details: { count: number } }).details.count
+    : 1
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={path}
+        style={{
+          ...style,
+          stroke: 'rgba(var(--accent-rgb), 0.8)',
+          strokeWidth: selected ? 1 : 1,
+          strokeDasharray: '1 4',
+          animation: 'none',
+        }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelLayout.x}px, ${labelLayout.y}px)`,
+            pointerEvents: 'none',
+            opacity: style?.opacity,
+            zIndex: 2,
+          }}
+        >
+          <div
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 999,
+              background: 'var(--bg-element)',
+              border: '1px dashed rgba(var(--accent-rgb), 0.8)',
+              color: 'white',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 11,
+              fontWeight: 600,
+              boxShadow: selected ? '0 0 0 1px rgba(255,255,255,0.2)' : 'none',
+            }}
+          >
+            {count}
+          </div>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  )
+}
+
+export default memo(ProxyConnectorEdge)

package/src/components/ProxyConnectorPanel.tsx

@@ -0,0 +1,130 @@
+import { Box, Button, HStack, Icon, Text, VStack, Divider, Flex } from '@chakra-ui/react'
+import { useNavigate } from 'react-router-dom'
+import type { ProxyConnectorDetails } from '../crossBranch/types'
+import SlidingPanel from './SlidingPanel'
+import PanelHeader from './PanelHeader'
+import { ChevronRightIcon, NavigationIcon } from './Icons'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  details: ProxyConnectorDetails | null
+  hasBackdrop?: boolean
+}
+
+export default function ProxyConnectorPanel({
+  isOpen,
+  onClose,
+  details,
+  hasBackdrop = true,
+}: Props) {
+  const navigate = useNavigate()
+
+  return (
+    <SlidingPanel
+      isOpen={isOpen}
+      onClose={onClose}
+      panelKey="proxy-connector-panel"
+      width={{ base: 'calc(100vw - 24px)', md: '300px' }}
+      hasBackdrop={hasBackdrop}
+    >
+      <PanelHeader title="Relationships" onClose={onClose} />
+
+      <Box flex={1} overflowY="auto" px={4} py={4}>
+        {details ? (
+          <VStack align="stretch" spacing={6}>
+            {/* Header info */}
+            <Box>
+              <HStack spacing={2} mb={1}>
+                <Text color="white" fontSize="s" letterSpacing="-0.01em">
+                  {details.sourceAnchorName}
+                </Text>
+                <Icon as={ChevronRightIcon} color="whiteAlpha.400" />
+                <Text color="white" fontSize="s" letterSpacing="-0.01em">
+                  {details.targetAnchorName}
+                </Text>
+              </HStack>
+              <Text color="blue.300" fontSize="xs" fontWeight="600" textTransform="uppercase" letterSpacing="0.05em">
+                {details.label}
+              </Text>
+            </Box>
+
+            <Divider borderColor="whiteAlpha.100" />
+
+            <VStack align="stretch" spacing={4}>
+              <Text color="gray.500" fontSize="10px" fontWeight="800" letterSpacing="0.1em" textTransform="uppercase">
+                Underlying Connectors
+              </Text>
+
+              <VStack align="stretch" spacing={3}>
+                {details.connectors.map((leaf, idx) => (
+                  <Box
+                    key={`${leaf.connector.id}-${idx}`}
+                    px={3}
+                    py={3}
+                    rounded="xl"
+                    bg="whiteAlpha.50"
+                    border="1px solid"
+                    borderColor="whiteAlpha.100"
+                    _hover={{ bg: 'whiteAlpha.100', borderColor: 'whiteAlpha.200' }}
+                    transition="all 0.2s"
+                  >
+                    <VStack align="stretch" spacing={3}>
+                      <Box>
+                        <HStack spacing={2} mb={1}>
+                          <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
+                            {leaf.source.actualElementName}
+                          </Text>
+                          <Icon as={ChevronRightIcon} color="whiteAlpha.400" />
+                          <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
+                            {leaf.target.actualElementName}
+                          </Text>
+                        </HStack>
+
+                        {(leaf.connector.label || leaf.connector.relationship) && (
+                          <Text color="gray.400" fontSize="xs" fontStyle={!leaf.connector.label ? 'italic' : 'normal'}>
+                            {leaf.connector.label || leaf.connector.relationship}
+                          </Text>
+                        )}
+                      </Box>
+
+                      {leaf.connector.description && (
+                        <Text color="gray.500" fontSize="xs" lineHeight="tall" pb={1}>
+                          {leaf.connector.description}
+                        </Text>
+                      )}
+
+                      <Button
+                        size="xs"
+                        variant="clay"
+                        colorScheme="blue"
+                        color="blue.100"
+                        leftIcon={<NavigationIcon size={12} />}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          navigate(`/views/${leaf.ownerViewId}`);
+                          onClose();
+                        }}
+                        w="full"
+                        justifyContent="flex-start"
+                        h="28px"
+                        fontSize="11px"
+                      >
+                        Open {leaf.ownerViewName}
+                      </Button>
+                    </VStack>
+                  </Box>
+                ))}
+              </VStack>
+            </VStack>
+          </VStack>
+        ) : (
+          <Flex h="full" align="center" justify="center" direction="column" gap={3}>
+            <Text color="gray.500" fontSize="sm">Select a connector to inspect it.</Text>
+          </Flex>
+        )}
+      </Box>
+    </SlidingPanel>
+  )
+}

package/src/components/SafeBackground.tsx

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef } from 'react'
+import { Background } from 'reactflow'
+import { useStore } from 'reactflow'
+
+/**
+ * Guards React Flow's Background against NaN zoom.
+ *
+ * In @reactflow/background, `scaledSize = patternSize * transform[2]` has no
+ * NaN guard (unlike scaledGap which uses `|| 1`). When d3-zoom produces a NaN
+ * transform during fitView on a zero-size container, scaledSize becomes NaN,
+ * propagating to patternOffset and the circle cx/cy attributes.
+ *
+ * This wrapper simply skips rendering until zoom is a positive finite number.
+ */
+export function SafeBackground(props: ComponentPropsWithoutRef<typeof Background>) {
+  const [x, y, zoom] = useStore((s) => s.transform)
+  if (!isFinite(zoom) || zoom <= 0 || !isFinite(x) || !isFinite(y)) return null
+  return <Background {...props} />
+}

package/src/components/ScrollIndicatorWrapper.tsx

@@ -0,0 +1,117 @@
+import { Box, type BoxProps } from '@chakra-ui/react'
+import { useCallback, useEffect, useRef, useState, type ReactNode, forwardRef, useImperativeHandle } from 'react'
+
+interface ScrollIndicatorWrapperProps extends BoxProps {
+  children: ReactNode
+  scrollId?: string
+}
+
+const ScrollIndicatorWrapper = forwardRef<HTMLDivElement, ScrollIndicatorWrapperProps>(({
+  children,
+  scrollId,
+  onScroll,
+  ...props
+}, ref) => {
+  const [scrollIndicators, setScrollIndicators] = useState({ showTop: false, showBottom: false })
+  const internalRef = useRef<HTMLDivElement>(null)
+
+  // Use the provided ref if any, otherwise use our internal ref
+  useImperativeHandle(ref, () => internalRef.current as HTMLDivElement)
+
+  const updateScrollIndicators = useCallback(() => {
+    const el = internalRef.current
+    if (!el) return
+
+    const { scrollTop, scrollHeight, clientHeight } = el
+    const isScrollable = scrollHeight > clientHeight
+    const isAtBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1.5
+    const isAtTop = scrollTop < 1.5
+
+    const nextShowTop = isScrollable && !isAtTop
+    const nextShowBottom = isScrollable && !isAtBottom
+
+    setScrollIndicators((prev) => (
+      prev.showTop === nextShowTop && prev.showBottom === nextShowBottom
+        ? prev
+        : { showTop: nextShowTop, showBottom: nextShowBottom }
+    ))
+  }, [])
+
+  useEffect(() => {
+    const el = internalRef.current
+    if (!el) return
+
+    // Initial check
+    updateScrollIndicators()
+
+    // Observe size changes (e.g. content loading, filtering)
+    const observer = new ResizeObserver(updateScrollIndicators)
+    observer.observe(el)
+    if (el.firstElementChild) {
+      observer.observe(el.firstElementChild)
+    }
+
+    return () => observer.disconnect()
+  }, [updateScrollIndicators])
+
+  return (
+    <Box position="relative" flex={1} minH={0} overflow="hidden" display="flex" flexDir="column">
+      {/* Top Scroll indicator shadow */}
+      <Box
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        h="24px"
+        bgGradient="linear(to-b, rgba(0,0,0,0.1), transparent)"
+        pointerEvents="none"
+        transition="opacity 0.2s ease"
+        opacity={scrollIndicators.showTop ? 1 : 0}
+        zIndex={2}
+      />
+
+      <Box
+        ref={internalRef}
+        id={scrollId}
+        overflowY="auto"
+        minH={0}
+        onScroll={(e) => {
+          updateScrollIndicators()
+          onScroll?.(e)
+        }}
+        css={{
+          '&::-webkit-scrollbar': { width: '4px' },
+          '&::-webkit-scrollbar-track': { background: 'transparent' },
+          '&::-webkit-scrollbar-thumb': {
+            background: 'rgba(255,255,255,0.1)',
+            borderRadius: '10px',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            background: 'rgba(255,255,255,0.2)',
+          },
+        }}
+        {...props}
+      >
+        {children}
+      </Box>
+
+      {/* Bottom Scroll indicator shadow */}
+      <Box
+        position="absolute"
+        bottom={0}
+        left={0}
+        right={0}
+        h="40px"
+        bgGradient="linear(to-t, rgba(0,0,0,0.15), transparent)"
+        pointerEvents="none"
+        transition="opacity 0.2s ease"
+        opacity={scrollIndicators.showBottom ? 1 : 0}
+        zIndex={2}
+      />
+    </Box>
+  )
+})
+
+ScrollIndicatorWrapper.displayName = 'ScrollIndicatorWrapper'
+
+export default ScrollIndicatorWrapper