@tldiagram/core-ui 1.95.0 → 2.0.0

package/src/components/NodeContainer.tsx

@@ -8,6 +8,8 @@ export interface ElementContainerProps extends BoxProps {
   isSource?: boolean
   isTarget?: boolean
   isConnectorHighlighted?: boolean
+  hasStack?: boolean
+  kind?: string | null
 }
 
 export const ElementContainer = memo(forwardRef<ElementContainerProps, 'div'>(({
@@ -15,19 +17,24 @@ export const ElementContainer = memo(forwardRef<ElementContainerProps, 'div'>(({
   isSource,
   isTarget,
   isConnectorHighlighted,
+  hasStack,
+  kind: _kind,
   children,
   ...props
 }, ref) => {
   const { accent } = useAccentColor()
 
+  const brandedBorder = hexToRgba('#a0aec0', 0.5)
+
   const borderColor = isSource
     ? accent
     : isTarget
       ? 'teal.300'
       : isSelected || isConnectorHighlighted
         ? accent
-        : 'gray.600'
+        : brandedBorder
 
+  // Shadows matching ZUICanvas / high-fidelity look
   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)`
@@ -36,23 +43,54 @@ export const ElementContainer = memo(forwardRef<ElementContainerProps, 'div'>(({
 
   const boxShadow = isSource ? sourceShadow : isSelected ? selectionShadow : isConnectorHighlighted ? edgeHighlightShadow : restingShadow
 
+  const finalBorderColor = borderColor
+
   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 position="relative" zIndex={1}>
+      {hasStack && (
+        <>
+          {/* Stack effect matching ZUI renderer.ts (offset 4px and 8px) */}
+          <Box
+            position="absolute"
+            inset={0}
+            transform="translate(8px, 8px)"
+            bg="var(--bg-element)"
+            borderColor={finalBorderColor}
+            borderWidth="1px"
+            rounded="lg"
+            opacity={0.4}
+            zIndex={-2}
+          />
+          <Box
+            position="absolute"
+            inset={0}
+            transform="translate(4px, 4px)"
+            bg="var(--bg-element)"
+            borderColor={finalBorderColor}
+            borderWidth="1px"
+            rounded="lg"
+            opacity={0.7}
+            zIndex={-1}
+          />
+        </>
+      )}
+      <Box
+        ref={ref}
+        bg="var(--bg-element)"
+        borderColor={finalBorderColor}
+        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>
     </Box>
   )
 }))

package/src/components/ProxyConnectorPanel.tsx

@@ -1,15 +1,19 @@
-import { Box, Button, HStack, Icon, Text, VStack, Divider, Flex } from '@chakra-ui/react'
+import { Box, Button, HStack, Icon, Text, VStack, Divider, Flex, IconButton } 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'
+import { ChevronRightIcon, NavigationIcon, TrashIcon, EditIcon } from './Icons'
+import { useViewEditorContext } from '../pages/ViewEditor/context'
+import type { Connector } from '../types'
 
 interface Props {
   isOpen: boolean
   onClose: () => void
   details: ProxyConnectorDetails | null
   hasBackdrop?: boolean
+  onEdit?: (connector: Connector) => void
+  onDelete?: (connectorId: number, ownerViewId: number) => void
 }
 
 export default function ProxyConnectorPanel({
@@ -17,8 +21,11 @@ export default function ProxyConnectorPanel({
   onClose,
   details,
   hasBackdrop = true,
+  onEdit,
+  onDelete,
 }: Props) {
   const navigate = useNavigate()
+  const { canEdit } = useViewEditorContext()
 
   return (
     <SlidingPanel
@@ -27,6 +34,7 @@ export default function ProxyConnectorPanel({
       panelKey="proxy-connector-panel"
       width={{ base: 'calc(100vw - 24px)', md: '300px' }}
       hasBackdrop={hasBackdrop}
+      zIndex={950}
     >
       <PanelHeader title="Relationships" onClose={onClose} />
 
@@ -71,21 +79,54 @@ export default function ProxyConnectorPanel({
                   >
                     <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>
+                        <HStack justify="space-between" align="start">
+                          <VStack align="start" spacing={1} flex={1}>
+                            <HStack spacing={2}>
+                              <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>
+                            )}
+                          </VStack>
 
-                        {(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>
-                        )}
+                          {canEdit && (
+                            <HStack spacing={1} mt={-1}>
+                              <IconButton
+                                aria-label="Edit connector"
+                                icon={<EditIcon size={14} />}
+                                size="xs"
+                                variant="ghost"
+                                color="blue.300"
+                                _hover={{ bg: 'blue.900', color: 'blue.100' }}
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  onEdit?.(leaf.connector)
+                                }}
+                              />
+                              <IconButton
+                                aria-label="Delete connector"
+                                icon={<TrashIcon size={14} />}
+                                size="xs"
+                                variant="ghost"
+                                color="red.400"
+                                _hover={{ bg: 'red.900', color: 'red.100' }}
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  onDelete?.(leaf.connector.id, leaf.ownerViewId)
+                                }}
+                              />
+                            </HStack>
+                          )}
+                        </HStack>
                       </Box>
 
                       {leaf.connector.description && (
@@ -128,3 +169,4 @@ export default function ProxyConnectorPanel({
     </SlidingPanel>
   )
 }
+

package/src/components/ViewBezierConnector.tsx

@@ -1,6 +1,7 @@
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
 import { BaseEdge, EdgeLabelRenderer, Position, useStore, type EdgeProps } from 'reactflow'
 import { measureEdgeLabel, useEdgeLabelLayout } from './ViewEditorEdgeLabelLayout'
+import type { ProxyConnectorDetails } from '../crossBranch/types'
 
 const CURVATURE = 0.5
 
@@ -35,6 +36,7 @@ function ViewBezierConnector({
 }: 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 finalSourceX = sourceX
   const finalSourceY = sourceY
@@ -74,6 +76,37 @@ function ViewBezierConnector({
   const text = (!selected && fullText.length > 30) ? `${fullText.slice(0, 30)}...` : fullText
   const textWidth = text ? measureEdgeLabel(text, `${fontWeight} ${fontSize}px Inter, system-ui, sans-serif`) : 0
   const padding = Array.isArray(labelBgPadding) ? labelBgPadding : [2, 4]
+  const proxyBadgeCount = typeof (edge?.data as { proxyBadgeCount?: number } | undefined)?.proxyBadgeCount === 'number'
+    ? (edge?.data as { proxyBadgeCount: number }).proxyBadgeCount
+    : 0
+  const proxyBadgeDetails = ((edge?.data as { proxyBadgeDetails?: ProxyConnectorDetails | null } | undefined)?.proxyBadgeDetails) ?? null
+  const proxyBadgeText = proxyBadgeCount > 0 ? `+${proxyBadgeCount}` : ''
+  const versionChangeType = (edge?.data as { versionChangeType?: string } | undefined)?.versionChangeType
+  const versionBadgeText = versionChangeType === 'added'
+    ? '+ connector'
+    : versionChangeType === 'deleted'
+      ? '- connector'
+      : versionChangeType
+        ? '~ connector'
+        : ''
+  const badgeFontSize = 11
+  const badgeHorizontalPadding = 7
+  const badgeSize = 24
+  const labelWidth = textWidth + padding[1] * 2
+  const versionBadgeWidth = versionBadgeText
+    ? measureEdgeLabel(versionBadgeText, `700 ${badgeFontSize}px Inter, system-ui, sans-serif`) + badgeHorizontalPadding * 2
+    : 0
+  const badgeWidth = proxyBadgeText
+    ? Math.max(badgeSize, measureEdgeLabel(proxyBadgeText, `600 ${badgeFontSize}px Inter, system-ui, sans-serif`) + badgeHorizontalPadding * 2)
+    : 0
+  const labelHeight = text ? fontSize + padding[0] * 2 : 0
+  const badgeGap = (text && (proxyBadgeText || versionBadgeText)) || (proxyBadgeText && versionBadgeText) ? 8 : 0
+  const stackWidth = Math.max(labelWidth, badgeWidth, versionBadgeWidth)
+  const stackHeight = labelHeight +
+    (text && (proxyBadgeText || versionBadgeText) ? badgeGap : 0) +
+    (versionBadgeText ? badgeSize : 0) +
+    (versionBadgeText && proxyBadgeText ? badgeGap : 0) +
+    (proxyBadgeText ? badgeSize : 0)
 
   // Cubic bezier midpoint at t=0.5
   const labelX = 0.125 * finalSourceX + 0.375 * cp1x + 0.375 * cp2x + 0.125 * finalTargetX
@@ -82,16 +115,23 @@ function ViewBezierConnector({
   const labelLayout = useEdgeLabelLayout({
     id,
     preferredX: labelX,
-    preferredY: labelY,
-    width: textWidth + padding[1] * 2,
-    height: fontSize + padding[0] * 2,
+    preferredY: labelY + (stackHeight > 0 ? (stackHeight - labelHeight) / 2 : 0),
+    width: stackWidth,
+    height: stackHeight || (fontSize + padding[0] * 2),
     dx: finalTargetX - finalSourceX,
     dy: finalTargetY - finalSourceY,
   })
 
-  const labelWidth = textWidth + padding[1] * 2
-  const labelPath = text ? ` M ${labelLayout.x - labelWidth / 2},${labelLayout.y} L ${labelLayout.x + labelWidth / 2},${labelLayout.y}` : ''
+  const labelCenterY = labelLayout.y - ((proxyBadgeText || versionBadgeText) ? (stackHeight - labelHeight) / 2 : 0)
+  const labelPath = text ? ` M ${labelLayout.x - labelWidth / 2},${labelCenterY} L ${labelLayout.x + labelWidth / 2},${labelCenterY}` : ''
   const combinedInteractionPath = `${interactionPath}${labelPath}`
+  const handleBadgeClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!proxyBadgeDetails) return
+    const onOpenProxyBadge = (edge?.data as { onOpenProxyBadge?: (details: ProxyConnectorDetails) => void } | undefined)?.onOpenProxyBadge
+    onOpenProxyBadge?.(proxyBadgeDetails)
+  }, [edge?.data, proxyBadgeDetails])
 
   return (
     <>
@@ -108,7 +148,7 @@ function ViewBezierConnector({
         interactionWidth={20}
         style={{ stroke: 'transparent' }}
       />
-      {text && (
+      {(text || proxyBadgeText || versionBadgeText) && (
         <EdgeLabelRenderer>
           <div
             style={{
@@ -117,22 +157,77 @@ function ViewBezierConnector({
               pointerEvents: 'none',
               opacity: Number(labelStyle?.opacity ?? 1),
               zIndex: 2,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: badgeGap,
             }}
           >
-            <div
-              style={{
-                padding: `${padding[0]}px ${padding[1]}px`,
-                borderRadius: Array.isArray(labelBgBorderRadius) ? labelBgBorderRadius[0] : Number(labelBgBorderRadius ?? 4),
-                background: String(labelBgStyle?.fill ?? 'var(--chakra-colors-gray-900)'),
-                color: String(labelStyle?.fill ?? 'var(--accent)'),
-                fontSize,
-                fontWeight,
-                lineHeight: 1,
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {text}
-            </div>
+            {text && (
+              <div
+                style={{
+                  padding: `${padding[0]}px ${padding[1]}px`,
+                  borderRadius: Array.isArray(labelBgBorderRadius) ? labelBgBorderRadius[0] : Number(labelBgBorderRadius ?? 4),
+                  background: String(labelBgStyle?.fill ?? 'var(--chakra-colors-gray-900)'),
+                  color: String(labelStyle?.fill ?? 'var(--accent)'),
+                  fontSize,
+                  fontWeight,
+                  lineHeight: 1,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {text}
+              </div>
+            )}
+            {proxyBadgeText && (
+              <button
+                type="button"
+                onClick={handleBadgeClick}
+                style={{
+                  minWidth: badgeWidth,
+                  height: badgeSize,
+                  padding: `0 ${badgeHorizontalPadding}px`,
+                  borderRadius: 999,
+                  background: 'var(--bg-element)',
+                  border: '1px dashed rgba(var(--accent-rgb), 0.8)',
+                  color: 'white',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: badgeFontSize,
+                  fontWeight: 600,
+                  lineHeight: 1,
+                  boxShadow: selected ? '0 0 0 1px rgba(255,255,255,0.2)' : 'none',
+                  cursor: proxyBadgeDetails ? 'pointer' : 'default',
+                  pointerEvents: 'auto',
+                  appearance: 'none',
+                }}
+              >
+                {proxyBadgeText}
+              </button>
+            )}
+            {versionBadgeText && (
+              <div
+                style={{
+                  minWidth: versionBadgeWidth,
+                  height: badgeSize,
+                  padding: `0 ${badgeHorizontalPadding}px`,
+                  borderRadius: 999,
+                  background: 'rgba(17, 24, 39, 0.9)',
+                  border: `1px solid ${versionChangeType === 'added' ? '#68d391' : versionChangeType === 'deleted' ? '#fc8181' : '#f6e05e'}`,
+                  color: versionChangeType === 'added' ? '#68d391' : versionChangeType === 'deleted' ? '#fc8181' : '#f6e05e',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: badgeFontSize,
+                  fontWeight: 700,
+                  lineHeight: 1,
+                  boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
+                }}
+              >
+                {versionBadgeText}
+              </div>
+            )}
           </div>
         </EdgeLabelRenderer>
       )}

package/src/components/ViewExplorer/index.tsx

@@ -43,7 +43,7 @@ interface Props {
   tagColors: Record<string, Tag>
   selectedElement?: LibraryElement | null
   onUpdateTags?: (elementId: number, tags: string[]) => Promise<void>
-  onCreateTag: (tag: string, color?: string) => Promise<void>
+  onCreateTag: (tag: string, color?: string, description?: string) => Promise<void>
   layers: ViewLayer[]
   onHoverLayer: (tags: string[] | null, color?: string | null) => void
   onCreateLayer: (name: string, tags: string[], color: string) => Promise<void>

package/src/components/ViewFloatingMenu-vscode.tsx

@@ -20,6 +20,11 @@ interface ViewFloatingMenuProps {
   onImport: () => void
   onExport: () => void
   onShare: () => void
+  canUndo?: boolean
+  canRedo?: boolean
+  undoRedoDisabled?: boolean
+  onUndo?: () => void
+  onRedo?: () => void
   isFreePlan: boolean
   canUpgrade?: boolean
   activeTags?: string[]

package/src/components/ViewFloatingMenu.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import type { ViewFloatingMenuSlots } from '../slots'
 
 import {
-  HStack, Tooltip, Button, Box, Text, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, IconButton, useDisclosure
+  HStack, Tooltip, Button, Box, Text, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, IconButton, Slider, SliderTrack, SliderFilledTrack, SliderThumb, useDisclosure
 } from '@chakra-ui/react'
 import { DownloadIcon } from '@chakra-ui/icons'
 import {
@@ -17,6 +17,7 @@ import {
   TagsIcon,
 } from './Icons'
 import { KbdHint } from './PanelUI'
+import { RedoSvg, UndoSvg } from './ViewDrawMenu'
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 import type { Tag, ViewLayer } from '../types'
 
@@ -35,6 +36,13 @@ export interface ViewFloatingMenuProps extends ViewFloatingMenuSlots {
   onShare?: () => void
   focusMode: boolean
   onFocusModeChange: (enabled: boolean) => void
+  densityLevel?: number
+  onDensityLevelChange?: (level: number) => void
+  canUndo?: boolean
+  canRedo?: boolean
+  undoRedoDisabled?: boolean
+  onUndo?: () => void
+  onRedo?: () => void
 
   // Tag-related props
   allTags: string[]
@@ -73,6 +81,13 @@ function ViewFloatingMenu({
   onExport,
   focusMode,
   onFocusModeChange,
+  densityLevel = 0,
+  onDensityLevelChange,
+  canUndo = false,
+  canRedo = false,
+  undoRedoDisabled = false,
+  onUndo,
+  onRedo,
   allTags,
   layers,
   tagColors,
@@ -90,6 +105,11 @@ function ViewFloatingMenu({
 }: ViewFloatingMenuProps) {
   const { canEdit } = useViewEditorContext()
   const { isOpen: isTagsOpen, onClose: onTagsClose, onToggle: onTagsToggle } = useDisclosure()
+  const [draftDensityLevel, setDraftDensityLevel] = React.useState(densityLevel)
+
+  React.useEffect(() => {
+    setDraftDensityLevel(densityLevel)
+  }, [densityLevel])
 
   return (
     <HStack
@@ -131,6 +151,46 @@ function ViewFloatingMenu({
         </Button>
       </Tooltip>
 
+      {(canUndo || canRedo) && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          {canUndo && (
+            <Tooltip label="Undo" placement="top" openDelay={200}>
+              <IconButton
+                aria-label="Undo"
+                icon={<UndoSvg />}
+                variant="ghost"
+                h="28px"
+                minW="28px"
+                px={0}
+                color="gray.300"
+                isDisabled={undoRedoDisabled}
+                _disabled={{ opacity: 0.35, cursor: 'not-allowed' }}
+                _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                onClick={onUndo}
+              />
+            </Tooltip>
+          )}
+          {canRedo && (
+            <Tooltip label="Redo" placement="top" openDelay={200}>
+              <IconButton
+                aria-label="Redo"
+                icon={<RedoSvg />}
+                variant="ghost"
+                h="28px"
+                minW="28px"
+                px={0}
+                color="gray.300"
+                isDisabled={undoRedoDisabled}
+                _disabled={{ opacity: 0.35, cursor: 'not-allowed' }}
+                _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                onClick={onRedo}
+              />
+            </Tooltip>
+          )}
+        </>
+      )}
+
       {!hideFocusView && (
         <>
           <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
@@ -265,6 +325,55 @@ function ViewFloatingMenu({
         </>
       )}
 
+      {onDensityLevelChange && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          <Tooltip label={`Density ${draftDensityLevel}`} placement="top" openDelay={200}>
+            <Box
+              w="92px"
+              h="28px"
+              px={2.5}
+              display="flex"
+              alignItems="center"
+              bg="whiteAlpha.50"
+              rounded="md"
+            >
+              <Slider
+                aria-label="Density"
+                min={-2}
+                max={2}
+                step={1}
+                value={draftDensityLevel}
+                onChange={setDraftDensityLevel}
+                onChangeEnd={(value) => {
+                  setDraftDensityLevel(value)
+                  onDensityLevelChange(value)
+                }}
+                focusThumbOnChange={false}
+              >
+                <SliderTrack h="3px" bg="whiteAlpha.200">
+                  <SliderFilledTrack bg="var(--accent)" />
+                </SliderTrack>
+                {[-2, -1, 0, 1, 2].map((value) => (
+                  <Box
+                    key={value}
+                    position="absolute"
+                    left={`${((value + 2) / 4) * 100}%`}
+                    top="50%"
+                    transform="translate(-50%, -50%)"
+                    w="1px"
+                    h="9px"
+                    bg={draftDensityLevel >= value ? 'var(--accent)' : 'whiteAlpha.400'}
+                    pointerEvents="none"
+                  />
+                ))}
+                <SliderThumb boxSize="12px" bg="white" border="2px solid" borderColor="var(--accent)" />
+              </Slider>
+            </Box>
+          </Tooltip>
+        </>
+      )}
+
       {/* Draw mode toggle */}
       <Tooltip
         label={drawingMode ? 'Exit drawing mode' : 'Draw on diagram'}