@tldiagram/core-ui 1.87.0

package/src/assets/logo-wordmark.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Wordmark asset. Requires Josefin Sans to be loaded on the page (or in the browser cache).
+  Use inline or as a React component - NOT as <img src> (SVGs served as images cannot
+  load external fonts, and this file intentionally omits the embedded font blob).
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="44" viewBox="0 0 200 44">
+  <defs>
+    <linearGradient id="tg" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0"   stop-color="#90cdf4" />
+      <stop offset="0.5" stop-color="#63b3ed" />
+      <stop offset="1"   stop-color="#4299e1" />
+    </linearGradient>
+  </defs>
+  <text
+    x="0" y="34"
+    font-family="'Josefin Sans', sans-serif"
+    font-weight="600"
+    font-size="38"
+    fill="url(#tg)"
+    letter-spacing="-0.5">tlDiagram</text>
+</svg>

package/src/assets/logo.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+  <defs>
+    <clipPath id="roundsq">
+      <rect width="1024" height="1024" rx="224" ry="224" />
+    </clipPath>
+    <filter id="dshadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="32" result="blur1" />
+      <feFlood flood-color="#63b3ed" flood-opacity="0.3" result="c1" />
+      <feComposite in="c1" in2="blur1" operator="in" result="glow1" />
+      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur2" />
+      <feFlood flood-color="#90cdf4" flood-opacity="0.5" result="c2" />
+      <feComposite in="c2" in2="blur2" operator="in" result="glow2" />
+      <feDropShadow dx="0" dy="20" stdDeviation="20" flood-color="#000" flood-opacity="0.9"
+        result="drop" />
+      <feMerge>
+        <feMergeNode in="glow1" />
+        <feMergeNode in="glow2" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <linearGradient id="dgrad" x1="0" y1="0" x2="0.6" y2="1">
+      <stop offset="0" stop-color="#90cdf4" />
+      <stop offset="0.45" stop-color="#63b3ed" />
+      <stop offset="1" stop-color="#2b6cb0" />
+    </linearGradient>
+  </defs>
+  <g clip-path="url(#roundsq)" transform="matrix(1, 0, 0, 1, -1.4210854715202004e-14, 0)">
+    <g filter="url(#dshadow)" transform="translate(78, 118) scale(0.8)" fill-rule="evenodd">
+      <path
+        d="M201 18s169-39 340-2c171 38 342 152 342 457S713 902 544 949c-170 48-344 19-344 19l1-566h302V217H201z M455 715c-67 83-122 141-62 48q23-35 33-62h-4a78 78 0 1 1 78-78q0 24-12 44-11 21-33 48"
+        fill="url(#dgrad)" />
+    </g>
+  </g>
+</svg>

package/src/components/CodePreviewPanel-vscode.tsx

@@ -0,0 +1,85 @@
+/**
+ * VS Code variant of CodePreviewPanel.
+ * Instead of fetching code from GitHub and rendering it inline, we show a
+ * single "Open in Editor" button that navigates VS Code to the linked file.
+ * CodeMirror + tree-sitter WASM are excluded from the VS Code bundle entirely.
+ */
+import { Box, Button, HStack, Text } from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
+import { vscodeBridge } from '../lib/vscodeBridge'
+import type { PlacedElement } from '../types'
+
+interface Props {
+  element: PlacedElement | null
+  onClose: () => void
+}
+
+export default function CodePreviewPanel({ element, onClose }: Props) {
+  if (!element?.file_path) return null
+
+  const filePath = element.file_path
+  const hashIdx = filePath.indexOf('#')
+  const fp = hashIdx >= 0 ? filePath.slice(0, hashIdx) : filePath
+  let symbolName: string | undefined
+  let symbolKind: string | undefined
+  let startLine: number | undefined
+  if (hashIdx >= 0) {
+    try {
+      const p = JSON.parse(filePath.slice(hashIdx + 1))
+      symbolName = typeof p.name === 'string' ? p.name : undefined
+      symbolKind = typeof p.type === 'string' ? p.type : undefined
+      startLine = typeof p.startLine === 'number' ? p.startLine : undefined
+    } catch { /* intentionally empty */ }
+  }
+
+  const handleOpen = () => {
+    vscodeBridge.postMessage({ type: 'open-file', filePath: fp, startLine, symbolName, symbolKind })
+  }
+
+  return (
+    <Box
+      position="absolute"
+      left={4}
+      top={4}
+      bottom={4}
+      w="280px"
+      bg="var(--bg-panel)"
+      border="1px solid"
+      borderColor="whiteAlpha.100"
+      rounded="xl"
+      display="flex"
+      flexDirection="column"
+      zIndex={20}
+      overflow="hidden"
+    >
+      <HStack px={3} py={2} borderBottom="1px solid" borderColor="whiteAlpha.100" justify="space-between">
+        <Text fontSize="12px" fontWeight="semibold" color="gray.200" isTruncated>
+          Source Link
+        </Text>
+        <Button variant="ghost" size="xs" onClick={onClose} px={1} color="gray.500">
+          ✕
+        </Button>
+      </HStack>
+
+      <Box px={3} py={3} flex={1} display="flex" flexDirection="column" gap={2}>
+        {symbolName && (
+          <Text fontSize="12px" color="gray.300" fontWeight="medium">{symbolName}</Text>
+        )}
+        <Text fontSize="11px" color="gray.500" isTruncated title={fp}>{fp}</Text>
+        {typeof startLine === 'number' && (
+          <Text fontSize="10px" color="gray.600">Line {startLine}</Text>
+        )}
+        <Button
+          mt={2}
+          size="sm"
+          variant="outline"
+          colorScheme="blue"
+          leftIcon={<ExternalLinkIcon />}
+          onClick={handleOpen}
+        >
+          Open in Editor
+        </Button>
+      </Box>
+    </Box>
+  )
+}

package/src/components/CodePreviewPanel.tsx

@@ -0,0 +1,384 @@
+import { useEffect, useState, useRef } from 'react'
+import type { SVGProps } from 'react'
+import { Box, Button, CloseButton, HStack, Icon, Spinner, Text, Tooltip, VStack } from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
+
+const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width="16px"
+    height="16px"
+    {...props}
+  >
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.765 1.11.765 2.235 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+  </svg>
+)
+
+const customCodeTheme = EditorView.theme({
+  "&": {
+    backgroundColor: "transparent !important",
+  },
+  ".cm-gutters": {
+    backgroundColor: "transparent !important",
+    borderRight: "1px solid var(--chakra-colors-whiteAlpha-100)",
+    color: "var(--chakra-colors-whiteAlpha-300)",
+  },
+  ".cm-activeLine": {
+    backgroundColor: "var(--chakra-colors-whiteAlpha-100) !important",
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "var(--chakra-colors-whiteAlpha-200) !important",
+  },
+  ".cm-content": {
+    caretColor: "var(--chakra-colors-blue-400)",
+  }
+}, { dark: true })
+import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import { EditorView } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { javascript } from '@codemirror/lang-javascript'
+import { python } from '@codemirror/lang-python'
+import { cpp } from '@codemirror/lang-cpp'
+import { java } from '@codemirror/lang-java'
+import { rust } from '@codemirror/lang-rust'
+
+import SlidingPanel from './SlidingPanel'
+import { findSymbolByName, getParser, detectLanguage, type SupportedLanguage } from '../utils/treesitter'
+import type { PlacedElement } from '../types'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  element: PlacedElement | null
+  hasBackdrop?: boolean
+}
+
+function parseAnchor(anchorStr: string):
+  | { kind: 'symbol'; name: string; type: string }
+  | { kind: 'lines'; startLine: number; endLine: number }
+  | { kind: 'none' } {
+  if (!anchorStr) return { kind: 'none' }
+  try {
+    const p = JSON.parse(anchorStr)
+    if (p.name && !p.startLine) return { kind: 'symbol', name: p.name, type: p.type || '' }
+    if (p.startLine) return { kind: 'lines', startLine: p.startLine, endLine: p.endLine ?? p.startLine }
+  } catch {
+    // intentionally empty
+  }
+  return { kind: 'none' }
+}
+
+import { githubCache } from '../utils/githubCache'
+import { getGithubRepoVisibility } from '../utils/githubApi'
+import { parseRepoSlug } from '../utils/url'
+
+export default function CodePreviewPanel({ isOpen, onClose, element, hasBackdrop = true }: Props) {
+  const [code, setCode] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [resolvedStartLine, setResolvedStartLine] = useState<number | null>(null)
+  const [resolvedEndLine, setResolvedEndLine] = useState<number | null>(null)
+  const [isPrivateRepo, setIsPrivateRepo] = useState(false)
+
+  const editorRef = useRef<ReactCodeMirrorRef>(null)
+
+  const filePath = element?.file_path || ''
+  const hashIdx = filePath.indexOf('#')
+  const basePath = hashIdx >= 0 ? filePath.slice(0, hashIdx) : filePath
+  const symbolInfoStr = hashIdx >= 0 ? filePath.slice(hashIdx + 1) : ''
+  const repoSlug = element?.repo ? parseRepoSlug(element.repo) : ''
+
+  useEffect(() => {
+    if (!isOpen || !element || !repoSlug || !basePath) return
+
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    setCode('')
+    setResolvedStartLine(null)
+    setResolvedEndLine(null)
+    setIsPrivateRepo(false)
+
+    const branch = element.branch || 'main'
+    const rawUrl = `https://raw.githubusercontent.com/${repoSlug}/refs/heads/${branch}/${basePath}`
+
+    // Check repo visibility (cached)
+    const checkAndFetch = async () => {
+      const cachedVisibility = githubCache.getRepoPublic(repoSlug)
+      if (cachedVisibility === false) {
+        if (!cancelled) { setIsPrivateRepo(true); setLoading(false) }
+        return
+      }
+      if (cachedVisibility === null) {
+        try {
+          const visibility = await getGithubRepoVisibility(repoSlug)
+          if (visibility === 'public') {
+            githubCache.setRepoPublic(repoSlug, true)
+          } else if (visibility === 'private') {
+            githubCache.setRepoPublic(repoSlug, false)
+            if (!cancelled) { setIsPrivateRepo(true); setLoading(false) }
+            return
+          }
+        } catch {
+          // Network error: proceed optimistically
+        }
+      }
+
+      const cached = githubCache.getContent(rawUrl)
+      if (cached) {
+        if (!cancelled) setCode(cached)
+        if (!cancelled) setLoading(false)
+        const anchor = parseAnchor(symbolInfoStr)
+        const effectiveLanguage = element.language || detectLanguage(basePath)
+        if (anchor.kind === 'symbol' && effectiveLanguage) {
+          getParser(effectiveLanguage as SupportedLanguage).then(async (parser) => {
+            const tree = parser.parse(cached)
+            const found = findSymbolByName(tree, effectiveLanguage as SupportedLanguage, anchor.name, anchor.type)
+            if (!cancelled && found) {
+              setResolvedStartLine(found.startLine)
+              setResolvedEndLine(found.endLine)
+            }
+          }).catch(() => {})
+        } else if (anchor.kind === 'lines' && !cancelled) {
+          setResolvedStartLine(anchor.startLine)
+          setResolvedEndLine(anchor.endLine)
+        }
+        return
+      }
+
+      try {
+        const res = await fetch(rawUrl)
+        if (!res.ok) throw new Error(`Failed to fetch: ${res.statusText}`)
+        const text = await res.text()
+        if (cancelled) return
+        githubCache.setContent(rawUrl, text)
+        setCode(text)
+
+        const anchor = parseAnchor(symbolInfoStr)
+        const effectiveLanguage = element.language || detectLanguage(basePath)
+        if (anchor.kind === 'symbol' && effectiveLanguage) {
+          try {
+            const parser = await getParser(effectiveLanguage as SupportedLanguage)
+            const tree = parser.parse(text)
+            const found = findSymbolByName(tree, effectiveLanguage as SupportedLanguage, anchor.name, anchor.type)
+            if (!cancelled && found) {
+              setResolvedStartLine(found.startLine)
+              setResolvedEndLine(found.endLine)
+            }
+          } catch {
+            // intentionally empty
+          }
+        } else if (anchor.kind === 'lines') {
+          if (!cancelled) {
+            setResolvedStartLine(anchor.startLine)
+            setResolvedEndLine(anchor.endLine)
+          }
+        }
+      } catch (err: unknown) {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err))
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+
+    checkAndFetch()
+    return () => { cancelled = true }
+  }, [isOpen, element, repoSlug, basePath, symbolInfoStr])
+
+  useEffect(() => {
+    if (!code || !resolvedStartLine || !editorRef.current?.view) return
+    const view = editorRef.current.view
+    try {
+      const linePos = view.state.doc.line(resolvedStartLine)
+      const endPos = view.state.doc.line(resolvedEndLine ?? resolvedStartLine)
+      view.dispatch({
+        selection: { anchor: linePos.from, head: endPos.to },
+        effects: [
+          EditorView.scrollIntoView(linePos.from, { y: 'center' })
+        ]
+      })
+    } catch {
+    // intentionally empty
+  }
+  }, [code, resolvedStartLine, resolvedEndLine])
+
+  const githubUrl = element?.repo && basePath
+    ? `https://github.com/${repoSlug}/blob/${element.branch || 'main'}/${basePath}`
+    + (resolvedStartLine ? `#L${resolvedStartLine}-L${resolvedEndLine ?? resolvedStartLine}` : '')
+    : null
+
+  const getLanguageExtension = () => {
+    const extensions = [customCodeTheme]
+    const effectiveLanguage = element?.language || detectLanguage(basePath)
+    switch (effectiveLanguage) {
+      case 'javascript':
+      case 'typescript':
+        extensions.push(javascript({ typescript: effectiveLanguage === 'typescript' }))
+        break
+      case 'python': extensions.push(python()); break
+      case 'cpp': extensions.push(cpp()); break
+      case 'java': extensions.push(java()); break
+      case 'rust': extensions.push(rust()); break
+    }
+    return extensions
+  }
+
+  return (
+    <SlidingPanel
+      isOpen={isOpen}
+      onClose={onClose}
+      panelKey="code-preview"
+      side="left"
+      width={{ base: 'calc(100vw - 32px)', md: '45vw' }}
+      minWidth="300px"
+      height="calc(90vh - 2rem)"
+      maxHeight="calc(90vh - 2rem)"
+      hasBackdrop={hasBackdrop}
+      zIndex={1300}
+    >
+      {/* Header */}
+      <HStack px={4} pt={4} pb={3} justify="space-between" flexShrink={0}
+        borderBottom="1px solid" borderColor="whiteAlpha.100">
+        <VStack align="start" spacing={0} minW={0} flex={1}>
+          <Text fontSize="10px" color="gray.600" letterSpacing="widest" textTransform="uppercase" fontWeight="600">
+            Source
+          </Text>
+          <Text fontSize="sm" fontWeight="700" color="white" isTruncated maxW={{ base: '180px', md: '360px' }} letterSpacing="0.01em">
+            {basePath.split('/').pop() || 'Code'}
+          </Text>
+          {resolvedStartLine && (
+            <Text fontSize="10px" color="blue.400" fontFamily="mono">
+              L{resolvedStartLine}–L{resolvedEndLine ?? resolvedStartLine}
+            </Text>
+          )}
+          {isPrivateRepo && (
+            <Text fontSize="10px" color="orange.400" fontFamily="mono">
+              Private repository
+            </Text>
+          )}
+        </VStack>
+        <HStack spacing={2} flexShrink={0}>
+          {element?.url && (
+            <Tooltip label="Open URL" placement="bottom">
+              <Button
+                as="a"
+                href={element.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Open URL"
+                leftIcon={<ExternalLinkIcon w="12px" h="12px" />}
+                size="xs"
+                variant="outline"
+                color="whiteAlpha.700"
+                borderColor="whiteAlpha.200"
+                h="24px"
+                px={2.5}
+                fontSize="11px"
+                fontWeight="600"
+                bg="whiteAlpha.50"
+                _hover={{
+                  color: 'white',
+                  bg: 'whiteAlpha.100',
+                  borderColor: 'whiteAlpha.400',
+                  textDecoration: 'none',
+                  transform: 'translateY(-0.5px)',
+                  boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+                }}
+                _active={{
+                  bg: 'whiteAlpha.200',
+                  transform: 'translateY(0)',
+                }}
+                transition="all 0.1s"
+              >
+                Open URL
+              </Button>
+            </Tooltip>
+          )}
+          {githubUrl && (
+            <Tooltip label="Open in GitHub" placement="bottom">
+              <Button
+                as="a"
+                href={isPrivateRepo ? undefined : githubUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Open in GitHub"
+                leftIcon={<Icon as={GithubIcon} boxSize="13px" />}
+                size="xs"
+                variant="outline"
+                color={isPrivateRepo ? 'whiteAlpha.300' : 'whiteAlpha.700'}
+                borderColor={isPrivateRepo ? 'whiteAlpha.100' : 'whiteAlpha.200'}
+                h="24px"
+                px={2.5}
+                fontSize="11px"
+                fontWeight="600"
+                bg={isPrivateRepo ? 'transparent' : 'whiteAlpha.50'}
+                pointerEvents={isPrivateRepo ? 'none' : undefined}
+                opacity={isPrivateRepo ? 0.4 : undefined}
+                _hover={isPrivateRepo ? {} : {
+                  color: 'white',
+                  bg: 'whiteAlpha.100',
+                  borderColor: 'whiteAlpha.400',
+                  textDecoration: 'none',
+                  transform: 'translateY(-0.5px)',
+                  boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+                }}
+                _active={{
+                  bg: 'whiteAlpha.200',
+                  transform: 'translateY(0)',
+                }}
+                transition="all 0.1s"
+              >
+                Open in GitHub
+              </Button>
+            </Tooltip>
+          )}
+          <CloseButton size="sm" color="whiteAlpha.500"
+            _hover={{ color: 'white', bg: 'whiteAlpha.100' }}
+            onClick={onClose} />
+        </HStack>
+      </HStack>
+
+      {/* Code area */}
+      <Box flex={1} overflow="hidden" position="relative" bg="var(--bg-main)">
+        {loading && (
+          <VStack position="absolute" inset={0} justify="center" align="center" bg="blackAlpha.600" zIndex={10}>
+            <Spinner color="blue.400" />
+            <Text color="white" fontSize="sm">Loading source...</Text>
+          </VStack>
+        )}
+        {error && (
+          <VStack position="absolute" inset={0} justify="center" align="center" bg="blackAlpha.800" zIndex={10} px={6}>
+            <Text color="red.400" fontSize="sm" textAlign="center">{error}</Text>
+          </VStack>
+        )}
+        {isPrivateRepo && !loading && (
+          <VStack position="absolute" inset={0} justify="center" align="center" bg="blackAlpha.800" zIndex={10} px={6} spacing={2}>
+            <Icon as={GithubIcon} boxSize="32px" color="whiteAlpha.300" />
+            <Text color="whiteAlpha.700" fontSize="sm" fontWeight="600">Private repository</Text>
+            <Text color="whiteAlpha.400" fontSize="xs" textAlign="center">
+              Code preview is unavailable for private repositories.
+            </Text>
+          </VStack>
+        )}
+        <Box position="absolute" inset={0}>
+          <CodeMirror
+            ref={editorRef}
+            value={code}
+            height="100%"
+            extensions={getLanguageExtension()}
+            theme={oneDark}
+            readOnly={true}
+            editable={false}
+            basicSetup={{
+              lineNumbers: true,
+              highlightActiveLineGutter: true,
+              highlightSelectionMatches: true,
+            }}
+            style={{ fontSize: '12px', height: '100%' }}
+          />
+        </Box>
+      </Box>
+    </SlidingPanel>
+  )
+}

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,66 @@
+import { useRef } from 'react'
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+} from '@chakra-ui/react'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  body: string
+  confirmLabel?: string
+  confirmColorScheme?: string
+  isLoading?: boolean
+}
+
+export default function ConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  body,
+  confirmLabel = 'Delete',
+  confirmColorScheme = 'red',
+  isLoading,
+}: Props) {
+  const cancelRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose} isCentered>
+      <AlertDialogOverlay bg="blackAlpha.700" backdropFilter="blur(4px)" />
+      <AlertDialogContent mx={4}>
+        <AlertDialogHeader>
+          {title}
+        </AlertDialogHeader>
+        <AlertDialogBody fontSize="sm">
+          {body}
+        </AlertDialogBody>
+        <AlertDialogFooter gap={2} pt={4}>
+          <Button
+            ref={cancelRef}
+            onClick={onClose}
+            variant="ghost"
+            size="sm"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={onConfirm}
+            isLoading={isLoading}
+            size="sm"
+            variant={confirmColorScheme === 'red' ? 'destructive' : undefined}
+          >
+            {confirmLabel}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}