@tldiagram/core-ui 1.87.0

package/src/components/LocalSourceLinker.tsx

@@ -0,0 +1,330 @@
+/**
+ * VS Code variant of GitSourceLinker.
+ * Uses the postMessage bridge to query workspace files and LSP symbols
+ * instead of fetching from GitHub.
+ */
+import { useState, useEffect, useCallback, useRef } from 'react'
+import {
+  Box,
+  Button,
+  HStack,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Spinner,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import { CheckIcon, SearchIcon } from '@chakra-ui/icons'
+import { vscodeBridge } from '../lib/vscodeBridge'
+import type { WorkspaceSymbol, ExtensionToWebviewMessage } from '../types/vscode-messages'
+import type { LibraryElement } from '../types'
+
+interface Props {
+  element: LibraryElement
+  isReadOnly: boolean
+  onUpdate: (updates: Partial<LibraryElement>) => void
+}
+
+function randomId() {
+  return Math.random().toString(36).slice(2, 10)
+}
+
+function buildSymbolAnchor(sym: Pick<WorkspaceSymbol, 'filePath' | 'name' | 'kind'>): string {
+  return `${sym.filePath}#${JSON.stringify({ name: sym.name, type: sym.kind.toLowerCase() })}`
+}
+
+function parseSourceAnchor(link: string): { name?: string; type?: string; startLine?: number } {
+  const hashIdx = link.indexOf('#')
+  if (hashIdx < 0) {
+    return {}
+  }
+
+  try {
+    const parsed = JSON.parse(link.slice(hashIdx + 1))
+    return {
+      name: typeof parsed.name === 'string' ? parsed.name : undefined,
+      type: typeof parsed.type === 'string' ? parsed.type : undefined,
+      startLine: typeof parsed.startLine === 'number' ? parsed.startLine : undefined,
+    }
+  } catch {
+    return {}
+  }
+}
+
+export default function LocalSourceLinker({ element, isReadOnly, onUpdate }: Props) {
+  const [fileQuery, setFileQuery] = useState('')
+  const [files, setFiles] = useState<string[]>([])
+  const [filesLoading, setFilesLoading] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [symbols, setSymbols] = useState<WorkspaceSymbol[]>([])
+  const [symbolsLoading, setSymbolsLoading] = useState(false)
+
+  const pendingRef = useRef<Map<string, (data: unknown) => void>>(new Map())
+
+  // Register message listener once
+  useEffect(() => {
+    const unsubscribe = vscodeBridge.onMessage((msg: ExtensionToWebviewMessage) => {
+      if (msg.type === 'workspace-files') {
+        const resolve = pendingRef.current.get(msg.requestId)
+        if (resolve) {
+          pendingRef.current.delete(msg.requestId)
+          resolve(msg.files)
+        }
+      } else if (msg.type === 'workspace-symbols') {
+        const resolve = pendingRef.current.get(msg.requestId)
+        if (resolve) {
+          pendingRef.current.delete(msg.requestId)
+          resolve(msg.symbols)
+        }
+      }
+    })
+    return unsubscribe
+  }, [])
+
+  // Pre-populate from existing file_path
+  useEffect(() => {
+    if (!element.file_path) return
+    const hashIdx = element.file_path.indexOf('#')
+    const fp = hashIdx >= 0 ? element.file_path.slice(0, hashIdx) : element.file_path
+    if (fp) {
+      setSelectedFile(fp)
+      setFileQuery(fp)
+    }
+  }, [element.file_path])
+
+  const requestFiles = useCallback(
+    (query: string) => {
+      if (!query.trim()) {
+        setFiles([])
+        return
+      }
+      const requestId = randomId()
+      setFilesLoading(true)
+      const pattern = query.includes('*') ? query : `**/*${query}*`
+      const promise = new Promise<string[]>((resolve) => {
+        pendingRef.current.set(requestId, (data) => resolve(data as string[]))
+      })
+      vscodeBridge.postMessage({ type: 'request-workspace-files', requestId, pattern })
+      void promise.then((result) => {
+        setFiles(result.slice(0, 50))
+        setFilesLoading(false)
+      })
+    },
+    [],
+  )
+
+  const requestSymbols = useCallback((filePath: string) => {
+    const requestId = randomId()
+    setSymbolsLoading(true)
+    const promise = new Promise<WorkspaceSymbol[]>((resolve) => {
+      pendingRef.current.set(requestId, (data) => resolve(data as WorkspaceSymbol[]))
+    })
+    vscodeBridge.postMessage({ type: 'request-symbol-list-for-file', requestId, filePath })
+    void promise.then((result) => {
+      setSymbols(result)
+      setSymbolsLoading(false)
+    })
+  }, [])
+
+  // Debounce file search
+  useEffect(() => {
+    if (isReadOnly) return
+    const timer = setTimeout(() => requestFiles(fileQuery), 300)
+    return () => clearTimeout(timer)
+  }, [fileQuery, isReadOnly, requestFiles])
+
+  const handleSelectFile = (fp: string) => {
+    setSelectedFile(fp)
+    setFileQuery(fp)
+    setFiles([])
+    setSymbols([])
+    requestSymbols(fp)
+  }
+
+  const handleSelectSymbol = (sym: WorkspaceSymbol) => {
+    onUpdate({ file_path: buildSymbolAnchor(sym) })
+  }
+
+  const handleClear = () => {
+    setSelectedFile(null)
+    setFileQuery('')
+    setFiles([])
+    setSymbols([])
+    onUpdate({ file_path: '' })
+  }
+
+  const currentLink = element.file_path || ''
+  const hasLink = !!currentLink
+
+  if (isReadOnly && hasLink) {
+    const hashIdx = currentLink.indexOf('#')
+    const filePart = hashIdx >= 0 ? currentLink.slice(0, hashIdx) : currentLink
+    const anchor = parseSourceAnchor(currentLink)
+    const symbolName = anchor.name ?? ''
+    return (
+      <Box>
+        <HStack spacing={1} mb={1}>
+          <CheckIcon color="green.400" boxSize={3} />
+          <Text fontSize="11px" color="gray.300" fontWeight="medium" isTruncated>
+            {symbolName ? `${symbolName} ${filePart}` : filePart}
+          </Text>
+        </HStack>
+        <Button
+          size="xs"
+          variant="ghost"
+          color="blue.400"
+          px={0}
+          h="auto"
+          onClick={() => {
+            if (!element.file_path) return
+            const hashIdx2 = element.file_path.indexOf('#')
+            const fp = hashIdx2 >= 0 ? element.file_path.slice(0, hashIdx2) : element.file_path
+            const parsedAnchor = parseSourceAnchor(element.file_path)
+            vscodeBridge.postMessage({
+              type: 'open-file',
+              filePath: fp,
+              startLine: parsedAnchor.startLine,
+              symbolName: parsedAnchor.name,
+              symbolKind: parsedAnchor.type,
+            })
+          }}
+        >
+          Open in Editor
+        </Button>
+      </Box>
+    )
+  }
+
+  return (
+    <VStack align="stretch" spacing={2}>
+      <Box>
+        <Text fontSize="10px" color="gray.500" mb={1} textTransform="uppercase" letterSpacing="wider">
+          Workspace File
+        </Text>
+        <InputGroup size="sm">
+          <Input
+            value={fileQuery}
+            onChange={(e) => setFileQuery(e.target.value)}
+            placeholder="Search files…"
+            bg="whiteAlpha.50"
+            border="1px solid"
+            borderColor="whiteAlpha.100"
+            fontSize="12px"
+            isDisabled={isReadOnly}
+          />
+          <InputRightElement>
+            {filesLoading ? <Spinner size="xs" /> : <SearchIcon boxSize={3} color="gray.500" />}
+          </InputRightElement>
+        </InputGroup>
+
+        {files.length > 0 && (
+          <Box
+            mt={1}
+            maxH="140px"
+            overflowY="auto"
+            bg="#0d1117"
+            border="1px solid"
+            borderColor="whiteAlpha.100"
+            rounded="md"
+            className="custom-scrollbar"
+          >
+            {files.map((f) => (
+              <Box
+                key={f}
+                px={2}
+                py={1}
+                fontSize="11px"
+                color="gray.300"
+                cursor="pointer"
+                _hover={{ bg: 'whiteAlpha.100', color: 'white' }}
+                onClick={() => handleSelectFile(f)}
+                isTruncated
+              >
+                {f}
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+
+      {selectedFile && (
+        <Box>
+          <Text fontSize="10px" color="gray.500" mb={1} textTransform="uppercase" letterSpacing="wider">
+            Symbol
+          </Text>
+          {symbolsLoading ? (
+            <HStack spacing={2} py={1}>
+              <Spinner size="xs" />
+              <Text fontSize="11px" color="gray.500">Loading symbols…</Text>
+            </HStack>
+          ) : symbols.length === 0 ? (
+            <Text fontSize="11px" color="gray.600">No symbols found</Text>
+          ) : (
+            <Box
+              maxH="140px"
+              overflowY="auto"
+              bg="#0d1117"
+              border="1px solid"
+              borderColor="whiteAlpha.100"
+              rounded="md"
+              className="custom-scrollbar"
+            >
+              {symbols.map((sym) => {
+                const anchor = buildSymbolAnchor(sym)
+                const isLinked = currentLink === anchor
+                return (
+                  <HStack
+                    key={`${sym.name}-${sym.startLine}`}
+                    px={2}
+                    py={1}
+                    spacing={2}
+                    cursor="pointer"
+                    bg={isLinked ? 'rgba(49,130,206,0.2)' : 'transparent'}
+                    _hover={{ bg: isLinked ? 'rgba(49,130,206,0.3)' : 'whiteAlpha.100' }}
+                    onClick={() => handleSelectSymbol(sym)}
+                  >
+                    {isLinked && <CheckIcon color="blue.400" boxSize={2.5} flexShrink={0} />}
+                    <Text fontSize="11px" color="gray.300" isTruncated>{sym.name}</Text>
+                    <Text fontSize="10px" color="gray.600" flexShrink={0}>{sym.kind}</Text>
+                  </HStack>
+                )
+              })}
+            </Box>
+          )}
+        </Box>
+      )}
+
+      {hasLink && (
+        <HStack spacing={2}>
+          <Button
+            size="xs"
+            variant="ghost"
+            color="blue.400"
+            px={0}
+            h="auto"
+            onClick={() => {
+              const hashIdx2 = currentLink.indexOf('#')
+              const fp = hashIdx2 >= 0 ? currentLink.slice(0, hashIdx2) : currentLink
+              const parsedAnchor = parseSourceAnchor(currentLink)
+              vscodeBridge.postMessage({
+                type: 'open-file',
+                filePath: fp,
+                startLine: parsedAnchor.startLine,
+                symbolName: parsedAnchor.name,
+                symbolKind: parsedAnchor.type,
+              })
+            }}
+          >
+            Open in Editor
+          </Button>
+          {!isReadOnly && (
+            <Button size="xs" variant="ghost" color="red.400" px={0} h="auto" onClick={handleClear}>
+              Clear
+            </Button>
+          )}
+        </HStack>
+      )}
+    </VStack>
+  )
+}

package/src/components/MiniZoomOnboarding.tsx

@@ -0,0 +1,78 @@
+import { Box, HStack, Text } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
+import { ZoomInIcon } from './Icons'
+
+interface Props {
+  isVisible: boolean
+}
+
+const pulseGlow = keyframes`
+  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4); }
+  70% { box-shadow: 0 0 0 20px rgba(var(--accent-rgb), 0); }
+  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
+`
+
+export default function MiniZoomOnboarding({ isVisible }: Props) {
+  return (
+    <Box
+      position="absolute"
+      top={{ base: '30px', md: '50px' }}
+      left="50%"
+      transform={isVisible ? 'translateX(-50%) translateY(0) scale(1)' : 'translateX(-50%) translateY(-20px) scale(0.95)'}
+      zIndex={100}
+      opacity={isVisible ? 1 : 0}
+      transition="all 0.8s cubic-bezier(0.16, 1, 0.3, 1)"
+      pointerEvents="none"
+    >
+      <Box
+        className="glass"
+        px={6}
+        py={4}
+        borderRadius="12px"
+        animation={isVisible ? `${pulseGlow} 3s infinite` : 'none'}
+        position="relative"
+        overflow="hidden"
+        border="1.5px solid rgba(var(--accent-rgb), 0.3)"
+      >
+        {/* Subtle accent bar for visual continuity */}
+        <Box
+          position="absolute"
+          top={0}
+          left={0}
+          w="4px"
+          h="100%"
+          bg="var(--accent)"
+          opacity={0.8}
+        />
+        
+        <HStack spacing={5} pl={3}>
+          <Box color="var(--accent)">
+            <ZoomInIcon size={24} />
+          </Box>
+          <Box>
+            <Text 
+              fontSize="10px" 
+              color="var(--accent)" 
+              fontWeight="900" 
+              letterSpacing="0.15em" 
+              textTransform="uppercase" 
+              mb={0.5}
+              opacity={0.9}
+            >
+              Pro Tip
+            </Text>
+            <Text 
+              fontSize="15px" 
+              color="white" 
+              fontWeight="600" 
+              whiteSpace="nowrap"
+              letterSpacing="-0.01em"
+            >
+              Scroll or pinch to dive into nodes
+            </Text>
+          </Box>
+        </HStack>
+      </Box>
+    </Box>
+  )
+}

package/src/components/NavBreadcrumb.tsx

@@ -0,0 +1,24 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
+import { useNavigate } from 'react-router-dom'
+import type { ViewTreeNode } from '../types'
+
+interface Props {
+  diagram: ViewTreeNode
+}
+
+export default function NavBreadcrumb({ diagram }: Props) {
+  const navigate = useNavigate()
+
+  return (
+    <Breadcrumb fontSize="sm" color="gray.500" sx={{ '& a': { color: 'gray.400', _hover: { color: 'gray.200' } } }}>
+      <BreadcrumbItem>
+        <BreadcrumbLink onClick={() => navigate('/views')} cursor="pointer">
+          Diagrams
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbItem isCurrentPage>
+        <BreadcrumbLink>{diagram.name}</BreadcrumbLink>
+      </BreadcrumbItem>
+    </Breadcrumb>
+  )
+}

package/src/components/NodeBody.tsx

@@ -0,0 +1,89 @@
+import { Box, Flex, Text, FlexProps } from '@chakra-ui/react'
+import { TYPE_COLORS } from '../types'
+
+interface ElementBodyProps extends FlexProps {
+  name: string
+  type: string
+  technology?: string
+  logoUrl?: string
+  nameSize?: string
+  typeSize?: string
+  techSize?: string
+}
+
+export const ElementBody = ({
+  name,
+  type,
+  technology,
+  logoUrl,
+  nameSize = 'sm',
+  typeSize = '2xs',
+  techSize = 'xs',
+  children,
+  ...props
+}: ElementBodyProps) => {
+  const color = TYPE_COLORS[type] ?? 'gray'
+
+  const hasLogo = !!logoUrl
+
+  return (
+    <Flex
+      flexDir={hasLogo ? 'row' : 'column'}
+      align={hasLogo ? 'center' : 'center'}
+      justify="center"
+      p={3}
+      gap={hasLogo ? 2 : 1}
+      {...props}
+    >
+      {hasLogo && (
+        <Flex
+          w="38px"
+          h="38px"
+          align="center"
+          justify="center"
+          flexShrink={0}
+        >
+          <Box
+            as="img"
+            src={logoUrl}
+            alt="technology icon"
+            maxW="100%"
+            maxH="100%"
+            objectFit="contain"
+          />
+        </Flex>
+      )}
+
+      <Flex flexDir="column" align={hasLogo ? 'flex-start' : 'center'} justify="center" flex={1} minW={0}>
+        <Text
+          fontWeight="semibold"
+          fontSize={nameSize}
+          noOfLines={2}
+          textAlign={hasLogo ? 'left' : 'center'}
+          color="gray.100"
+          lineHeight={1.15}
+        >
+          {name}
+        </Text>
+        {!!type && (
+          <Text
+            fontSize={typeSize}
+            color={`${color}.400`}
+            textAlign={hasLogo ? 'left' : 'center'}
+            textTransform="uppercase"
+            letterSpacing="0.06em"
+            lineHeight={1.1}
+          >
+            {type}
+          </Text>
+        )}
+        {technology && (
+          <Text fontSize={techSize} color="gray.500" textAlign={hasLogo ? 'left' : 'center'} lineHeight={1.1}>
+            [{technology}]
+          </Text>
+        )}
+        {children}
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/NodeContainer.tsx

@@ -0,0 +1,58 @@
+import { memo } from 'react'
+import { Box, BoxProps, forwardRef } from '@chakra-ui/react'
+import { useAccentColor } from '../context/ThemeContext'
+import { hexToRgba } from '../constants/colors'
+
+export interface ElementContainerProps extends BoxProps {
+  isSelected?: boolean
+  isSource?: boolean
+  isTarget?: boolean
+  isConnectorHighlighted?: boolean
+}
+
+export const ElementContainer = memo(forwardRef<ElementContainerProps, 'div'>(({
+  isSelected,
+  isSource,
+  isTarget,
+  isConnectorHighlighted,
+  children,
+  ...props
+}, ref) => {
+  const { accent } = useAccentColor()
+
+  const borderColor = isSource
+    ? accent
+    : isTarget
+      ? 'teal.300'
+      : isSelected || isConnectorHighlighted
+        ? accent
+        : 'gray.600'
+
+  const selectionShadow      = `0 0 0 3px ${hexToRgba(accent, 0.35)}, 0 10px 36px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.4)`
+  const sourceShadow         = `0 0 0 3px ${hexToRgba(accent, 0.55)}, 0 0 24px ${hexToRgba(accent, 0.25)}`
+  const edgeHighlightShadow  = `0 0 0 2px ${hexToRgba(accent, 0.2)}, 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35)`
+  const restingShadow        = '0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35)'
+  const hoverShadow          = isSource ? sourceShadow : isSelected ? selectionShadow : '0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4)'
+
+  const boxShadow = isSource ? sourceShadow : isSelected ? selectionShadow : isConnectorHighlighted ? edgeHighlightShadow : restingShadow
+
+  return (
+    <Box
+      ref={ref}
+      bg="var(--bg-element)"
+      borderColor={borderColor}
+      borderWidth="1px"
+      rounded="lg"
+      boxShadow={boxShadow}
+      transition="all var(--chakra-transitions-duration-fast) var(--chakra-transitions-easing-pop)"
+      position="relative"
+      _hover={{
+        borderColor: isSource ? accent : isTarget ? 'teal.200' : accent,
+        boxShadow: hoverShadow,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
+}))