@tldiagram/core-ui 1.87.0

package/src/components/SetChildModal.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Box,
+  Button,
+  Flex,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from '@chakra-ui/react'
+import type { ViewTreeNode } from '../types'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  targetId: number | null
+  treeData: ViewTreeNode[]
+  onConfirm: (childId: number) => Promise<void>
+}
+
+export default function SetChildModal({ isOpen, onClose, targetId, treeData, onConfirm }: Props) {
+  const [search, setSearch] = useState('')
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      setSearch('')
+      setSelectedId(null)
+    }
+  }, [isOpen])
+
+  const targetNode = useMemo(
+    () => treeData.find((n) => n.id === targetId),
+    [treeData, targetId]
+  )
+
+  // Forbidden: self + all ancestors of the target (to prevent cycles)
+  const forbiddenIds = useMemo(() => {
+    if (targetId === null) return new Set<number>()
+    const ancestors = new Set<number>()
+    ancestors.add(targetId)
+    let current = treeData.find((n) => n.id === targetId)
+    while (current && current.parent_view_id !== null) {
+      ancestors.add(current.parent_view_id)
+      current = treeData.find((n) => n.id === current!.parent_view_id)
+    }
+    return ancestors
+  }, [treeData, targetId])
+
+  // IDs that are already direct children of this diagram
+  const existingChildIds = useMemo(() => {
+    if (targetId === null) return new Set<number>()
+    return new Set(treeData.filter((n) => n.parent_view_id === targetId).map((n) => n.id))
+  }, [treeData, targetId])
+
+  const filteredList = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return treeData
+      .filter((n) => !forbiddenIds.has(n.id))
+      .filter((n) => !q || n.name.toLowerCase().includes(q))
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [treeData, forbiddenIds, search])
+
+  const handleConfirm = async () => {
+    if (selectedId === null) return
+    setSaving(true)
+    try {
+      await onConfirm(selectedId)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered size="sm">
+      <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(4px)" />
+      <ModalContent
+        bg="var(--bg-panel)"
+        border="1px solid"
+        borderColor="var(--border-main)"
+        borderRadius="12px"
+        boxShadow="0 20px 60px rgba(0,0,0,0.6)"
+      >
+        <ModalHeader color="gray.100" pb={2} fontSize="md" fontWeight="semibold">
+          Add Existing Child
+        </ModalHeader>
+        <ModalBody pb={0}>
+          {targetNode && (
+            <Text fontSize="xs" color="gray.500" mb={3}>
+              Parent: <Text as="span" color="gray.300" fontWeight="medium">{targetNode.name}</Text>
+            </Text>
+          )}
+          <Input
+            placeholder="Search diagrams…"
+            size="sm"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            mb={2}
+            autoFocus
+            bg="var(--bg-canvas)"
+            borderColor="gray.600"
+            color="gray.200"
+            _placeholder={{ color: 'gray.600' }}
+            _focus={{ borderColor: 'var(--accent)', boxShadow: '0 0 0 1px var(--accent)' }}
+            onKeyDown={(e) => { if (e.key === 'Enter' && selectedId) handleConfirm() }}
+          />
+          <Box
+            maxH="260px"
+            overflowY="auto"
+            borderRadius="8px"
+            border="1px solid"
+            borderColor="var(--border-main)"
+            css={{ '&::-webkit-scrollbar': { width: '4px' }, '&::-webkit-scrollbar-thumb': { background: '#4a5568', borderRadius: '2px' } }}
+          >
+            {filteredList.length === 0 && (
+              <Box px={3} py={4} textAlign="center">
+                <Text fontSize="sm" color="gray.600">No diagrams available</Text>
+              </Box>
+            )}
+            {filteredList.map((n, idx) => {
+              const isAlreadyChild = existingChildIds.has(n.id)
+              const isSelected = selectedId === n.id
+              return (
+                <Flex
+                  key={n.id}
+                  px={3}
+                  py="9px"
+                  align="center"
+                  justify="space-between"
+                  cursor="pointer"
+                  bg={isSelected ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
+                  borderBottom={idx < filteredList.length - 1 ? '1px solid' : 'none'}
+                  borderColor="var(--border-main)"
+                  transition="background 0.1s"
+                  _hover={{ bg: isSelected ? 'rgba(var(--accent-rgb), 0.16)' : 'whiteAlpha.50' }}
+                  onClick={() => setSelectedId(isSelected ? null : n.id)}
+                >
+                  <Text
+                    fontSize="sm"
+                    color={isSelected ? 'blue.200' : 'gray.300'}
+                    fontWeight={isSelected ? 'medium' : 'normal'}
+                    noOfLines={1}
+                    flex={1}
+                    minW={0}
+                    pr={2}
+                  >
+                    {n.name}
+                  </Text>
+                  <Flex align="center" gap={2} flexShrink={0}>
+                    {isAlreadyChild && (
+                      <Text fontSize="8px" color="blue.500" letterSpacing="0.1em" fontWeight="bold" textTransform="uppercase">
+                        child
+                      </Text>
+                    )}
+                    {n.parent_view_id !== null && !isAlreadyChild && (
+                      <Text fontSize="8px" color="gray.600" letterSpacing="0.08em" fontWeight="bold" textTransform="uppercase">
+                        has parent
+                      </Text>
+                    )}
+                    {isSelected && (
+                      <Box color="blue.400" fontSize="13px" lineHeight={1}>✓</Box>
+                    )}
+                  </Flex>
+                </Flex>
+              )
+            })}
+          </Box>
+        </ModalBody>
+        <ModalFooter gap={2} pt={3}>
+          <Button size="sm" variant="ghost" color="gray.500" _hover={{ color: 'gray.300', bg: 'whiteAlpha.100' }} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            colorScheme="blue"
+            isDisabled={selectedId === null}
+            isLoading={saving}
+            onClick={handleConfirm}
+          >
+            Set as Child
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

package/src/components/SetParentModal.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Box,
+  Button,
+  Flex,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from '@chakra-ui/react'
+import type { ViewTreeNode } from '../types'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  targetId: number | null
+  treeData: ViewTreeNode[]
+  onConfirm: (newParentId: number) => Promise<void>
+}
+
+export default function SetParentModal({ isOpen, onClose, targetId, treeData, onConfirm }: Props) {
+  const [search, setSearch] = useState('')
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      setSearch('')
+      setSelectedId(null)
+    }
+  }, [isOpen])
+
+  const targetNode = useMemo(
+    () => treeData.find((n) => n.id === targetId),
+    [treeData, targetId]
+  )
+
+  // Compute forbidden IDs: self + all descendants (BFS)
+  const forbiddenIds = useMemo(() => {
+    if (targetId === null) return new Set<number>()
+    const descendants = new Set<number>()
+    const stack: number[] = [targetId]
+    while (stack.length > 0) {
+      const id = stack.pop()!
+      treeData.forEach((n) => {
+        if (n.parent_view_id === id) {
+          descendants.add(n.id)
+          stack.push(n.id)
+        }
+      })
+    }
+    descendants.add(targetId)
+    return descendants
+  }, [treeData, targetId])
+
+  const currentParentId = targetNode?.parent_view_id ?? null
+
+  const filteredList = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return treeData
+      .filter((n) => !forbiddenIds.has(n.id))
+      .filter((n) => !q || n.name.toLowerCase().includes(q))
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [treeData, forbiddenIds, search])
+
+  const handleConfirm = async () => {
+    if (selectedId === null) return
+    setSaving(true)
+    try {
+      await onConfirm(selectedId)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered size="sm">
+      <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(4px)" />
+      <ModalContent
+        bg="var(--bg-panel)"
+        border="1px solid"
+        borderColor="var(--border-main)"
+        borderRadius="12px"
+        boxShadow="0 20px 60px rgba(0,0,0,0.6)"
+      >
+        <ModalHeader color="gray.100" pb={2} fontSize="md" fontWeight="semibold">
+          Set Parent Diagram
+        </ModalHeader>
+        <ModalBody pb={0}>
+          {targetNode && (
+            <Text fontSize="xs" color="gray.500" mb={3}>
+              Moving: <Text as="span" color="gray.300" fontWeight="medium">{targetNode.name}</Text>
+            </Text>
+          )}
+          <Input
+            placeholder="Search diagrams…"
+            size="sm"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            mb={2}
+            autoFocus
+            bg="var(--bg-canvas)"
+            borderColor="gray.600"
+            color="gray.200"
+            _placeholder={{ color: 'gray.600' }}
+            _focus={{ borderColor: 'var(--accent)', boxShadow: '0 0 0 1px var(--accent)' }}
+            onKeyDown={(e) => { if (e.key === 'Enter' && selectedId) handleConfirm() }}
+          />
+          <Box
+            maxH="260px"
+            overflowY="auto"
+            borderRadius="8px"
+            border="1px solid"
+            borderColor="var(--border-main)"
+            css={{ '&::-webkit-scrollbar': { width: '4px' }, '&::-webkit-scrollbar-thumb': { background: '#4a5568', borderRadius: '2px' } }}
+          >
+            {filteredList.length === 0 && (
+              <Box px={3} py={4} textAlign="center">
+                <Text fontSize="sm" color="gray.600">No diagrams available</Text>
+              </Box>
+            )}
+            {filteredList.map((n, idx) => {
+              const isCurrent = n.id === currentParentId
+              const isSelected = selectedId === n.id
+              return (
+                <Flex
+                  key={n.id}
+                  px={3}
+                  py="9px"
+                  align="center"
+                  justify="space-between"
+                  cursor="pointer"
+                  bg={isSelected ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
+                  borderBottom={idx < filteredList.length - 1 ? '1px solid' : 'none'}
+                  borderColor="var(--border-main)"
+                  transition="background 0.1s"
+                  _hover={{ bg: isSelected ? 'rgba(var(--accent-rgb), 0.16)' : 'whiteAlpha.50' }}
+                  onClick={() => setSelectedId(isSelected ? null : n.id)}
+                >
+                  <Text
+                    fontSize="sm"
+                    color={isSelected ? 'blue.200' : 'gray.300'}
+                    fontWeight={isSelected ? 'medium' : 'normal'}
+                    noOfLines={1}
+                    flex={1}
+                    minW={0}
+                    pr={2}
+                  >
+                    {n.name}
+                  </Text>
+                  <Flex align="center" gap={2} flexShrink={0}>
+                    {isCurrent && (
+                      <Text fontSize="8px" color="blue.500" letterSpacing="0.1em" fontWeight="bold" textTransform="uppercase">
+                        current
+                      </Text>
+                    )}
+                    {isSelected && (
+                      <Box color="blue.400" fontSize="13px" lineHeight={1}>✓</Box>
+                    )}
+                  </Flex>
+                </Flex>
+              )
+            })}
+          </Box>
+        </ModalBody>
+        <ModalFooter gap={2} pt={3}>
+          <Button size="sm" variant="ghost" color="gray.500" _hover={{ color: 'gray.300', bg: 'whiteAlpha.100' }} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            colorScheme="blue"
+            isDisabled={selectedId === null}
+            isLoading={saving}
+            onClick={handleConfirm}
+          >
+            Set Parent
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

package/src/components/SlidingPanel.tsx

@@ -0,0 +1,114 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { Box } from '@chakra-ui/react'
+import { type ReactNode, useRef, useEffect } from 'react'
+
+const EASE = [0.25, 0.46, 0.45, 0.94]
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  panelKey: string
+  side?: 'left' | 'right'
+  width?: string | Record<string, string>
+  minWidth?: string | Record<string, string>
+  maxHeight?: string
+  height?: string
+  hasBackdrop?: boolean
+  zIndex?: number
+  children: ReactNode
+}
+
+export default function SlidingPanel({
+  isOpen,
+  onClose,
+  panelKey,
+  side = 'right',
+  width = '300px',
+  minWidth,
+  maxHeight = 'calc(90vh - 7rem)',
+  height = 'calc(90vh - 7rem)',
+  hasBackdrop = true,
+  zIndex = 1000,
+  children,
+}: Props) {
+  // Use width if it's a fixed value, otherwise default to a safe offscreen distance
+  const resolvedWidth = typeof width === 'string' ? width : '320px'
+  const isFixed = resolvedWidth.endsWith('px')
+  const widthVal = isFixed ? parseInt(resolvedWidth) : 320
+  const offset = side === 'right' ? widthVal + 24 : -(widthVal + 24)
+
+  // Prevent wheel events from propagating to the canvas (React Flow would pan/zoom)
+  const boxRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const el = boxRef.current
+    if (!el) return
+    const handler = (e: WheelEvent) => e.stopPropagation()
+    el.addEventListener('wheel', handler, { passive: true })
+    return () => el.removeEventListener('wheel', handler)
+  }, [isOpen])
+
+  return (
+    <>
+      {hasBackdrop && (
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              key={`${panelKey}-backdrop`}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              style={{ position: 'fixed', inset: 0, zIndex: zIndex - 1 }}
+              onClick={onClose}
+            />
+          )}
+        </AnimatePresence>
+      )}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            key={`${panelKey}-panel`}
+            initial={{ x: offset, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: offset, opacity: 0 }}
+            transition={{ duration: 0.2, ease: EASE }}
+            style={{
+              position: 'fixed',
+              [side]: '1rem',
+              top: 0,
+              bottom: 0,
+              display: 'flex',
+              alignItems: 'center',
+              zIndex,
+              pointerEvents: 'none',
+            }}
+          >
+            <Box
+              ref={boxRef}
+              pointerEvents="auto"
+              w={width}
+              minW={minWidth}
+              maxW="calc(100vw - 24px)"
+              h={height}
+              maxH={maxHeight}
+              overflow="hidden"
+              display="flex"
+              flexDir="column"
+              bg="var(--bg-panel)"
+              bgImage="var(--grad-panel)"
+              backdropFilter="blur(24px)"
+              border="1px solid"
+              borderColor="whiteAlpha.100"
+              borderTop="2px solid"
+              borderTopColor="var(--accent)"
+              rounded="xl"
+              shadow="panel"
+            >
+              {children}
+            </Box>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}

package/src/components/TagUpsert.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from 'react'
+import { Box, HStack, Input, Text, VStack } from '@chakra-ui/react'
+
+interface Props {
+  currentTags: string[]
+  availableTags: string[]
+  onAddTag: (tag: string) => void
+  isReadOnly?: boolean
+}
+
+export default function TagUpsert({
+  currentTags,
+  availableTags,
+  onAddTag,
+  isReadOnly = false,
+}: Props) {
+  const [query, setQuery] = useState('')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const filtered = (() => {
+    if (!query.trim()) return []
+    const q = query.toLowerCase()
+    return availableTags
+      .filter((t) => t.toLowerCase().includes(q) && !currentTags.includes(t))
+      .slice(0, 8)
+  })()
+
+  type ResultItem =
+    | { kind: 'new'; label: string }
+    | { kind: 'existing'; tag: string }
+
+  const results: ResultItem[] = []
+  
+  if (query.trim() && !currentTags.includes(query.trim())) {
+    results.push({ kind: 'new', label: query.trim() })
+  }
+  
+  filtered.forEach(tag => {
+    if (tag.toLowerCase() !== query.trim().toLowerCase()) {
+      results.push({ kind: 'existing', tag })
+    }
+  })
+
+  useEffect(() => { setActiveIndex(0) }, [query])
+
+  const confirm = (idx: number) => {
+    const item = results[idx]
+    if (!item) return
+    if (item.kind === 'new') {
+      onAddTag(item.label)
+    } else {
+      onAddTag(item.tag)
+    }
+    setQuery('')
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') { 
+      e.preventDefault()
+      if (results.length > 0) {
+        confirm(activeIndex)
+      } else if (query.trim() && !currentTags.includes(query.trim())) {
+        onAddTag(query.trim())
+        setQuery('')
+      }
+      return 
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.min(i + 1, results.length - 1))
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.max(i - 1, 0))
+    }
+  }
+
+  return (
+    <VStack align="stretch" spacing={2}>
+      <Box position="relative">
+        <Input
+          ref={inputRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder="Search or create tag..."
+          size="sm"
+          bg="blackAlpha.300"
+          border="1px solid"
+          borderColor="whiteAlpha.200"
+          _focus={{ borderColor: 'var(--accent)', boxShadow: 'none' }}
+          rounded="md"
+          color="white"
+          isDisabled={isReadOnly}
+          autoComplete="off"
+        />
+
+        {query.trim() && results.length > 0 && (
+          <Box
+            position="absolute"
+            left="0"
+            top="calc(100% + 4px)"
+            zIndex={100}
+            bg="gray.800"
+            border="1px solid"
+            borderColor="whiteAlpha.300"
+            rounded="md"
+            shadow="xl"
+            w="full"
+            maxH="200px"
+            overflowY="auto"
+          >
+            <VStack spacing={0} align="stretch">
+              {results.map((item, i) => (
+                <Box
+                  key={i}
+                  px={3}
+                  py={2}
+                  bg={i === activeIndex ? 'whiteAlpha.200' : 'transparent'}
+                  cursor="pointer"
+                  _hover={{ bg: 'whiteAlpha.100' }}
+                  onMouseEnter={() => setActiveIndex(i)}
+                  onClick={() => confirm(i)}
+                >
+                  {item.kind === 'new' ? (
+                    <HStack spacing={1.5}>
+                      <Text fontSize="10px" color="var(--accent)" fontWeight="bold">+ Create</Text>
+                      <Text fontSize="xs" color="white" noOfLines={1}>{item.label}</Text>
+                    </HStack>
+                  ) : (
+                    <Text fontSize="xs" color="gray.200" noOfLines={1}>{item.tag}</Text>
+                  )}
+                </Box>
+              ))}
+            </VStack>
+          </Box>
+        )}
+      </Box>
+    </VStack>
+  )
+}