@tldiagram/core-ui 1.87.0

package/src/pages/InfiniteZoom.tsx

@@ -0,0 +1,404 @@
+// src/pages/InfiniteZoom.tsx Explore page holds the ZUI feature
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Center,
+  HStack,
+  IconButton,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  Spinner,
+  Text,
+  Tooltip,
+  useDisclosure,
+  VStack,
+} from '@chakra-ui/react'
+import { useSetHeader } from '../components/HeaderContext'
+import { api } from '../api/client'
+import type { ExploreData, ViewLayer } from '../types'
+import { FitViewIcon as FitViewSvg, TagsIcon, EyeIcon, EyeOffIcon, FocusIcon as FocusSvg } from '../components/Icons'
+import ExploreOnboarding from '../components/ExploreOnboarding'
+import ExplorePageOnboarding from '../components/ExplorePageOnboarding'
+import MiniZoomOnboarding from '../components/MiniZoomOnboarding'
+import { ZUICanvas, type ZUICanvasHandle } from '../components/ZUI'
+import { useCrossBranchContextSettings } from '../crossBranch/settings'
+import { primeWorkspaceGraphSnapshot } from '../crossBranch/store'
+
+// ── Types ──────────────────────────────────────────────────────────
+interface Props {
+  sharedToken?: string
+  shareSlot?: React.ReactNode
+}
+
+const MINI_ONBOARDING_KEY = 'shared_zoom_onboarding_dismissed'
+
+// ── Inner component ────────────────────────────────────────────────
+function InfiniteZoomInner({ sharedToken, shareSlot }: Props) {
+  const navigate = useNavigate()
+  const setHeader = useSetHeader()
+
+  const [data, setData] = useState<ExploreData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [canvasReady, setCanvasReady] = useState(false)
+  const [showMiniOnboarding, setShowMiniOnboarding] = useState(false)
+  const [tagColors] = useState<Record<string, import('../types').Tag>>({})
+  const [layers, setLayers] = useState<ViewLayer[]>([])
+  const [highlightedTags, setHighlightedTags] = useState<string[]>([])
+  const [highlightColor, setHighlightColor] = useState('')
+  const [hiddenTags, setHiddenTags] = useState<string[]>([])
+  const { isOpen: isTagsOpen, onClose: onTagsClose, onToggle: onTagsToggle } = useDisclosure()
+  const zuiRef = useRef<ZUICanvasHandle>(null)
+  const crossBranchSurface = sharedToken ? 'zui-shared' : 'zui'
+  const { settings: crossBranchSettings, setEnabled: setCrossBranchEnabled } = useCrossBranchContextSettings(crossBranchSurface)
+
+  // ── No data or No content ────────────────────────────────────────
+  const hasPlacements = useMemo(() => {
+    if (!data || !data.views) return false
+    return Object.values(data.views).some(d => (d && d.placements && d.placements.length > 0))
+  }, [data])
+
+  const allTags = useMemo(() => {
+    if (!data || !data.views) return []
+    const tagSet = new Set<string>()
+    Object.values(data.views).forEach(d => {
+      (d?.placements ?? []).forEach(p => { (p.tags ?? []).forEach(t => tagSet.add(t)) })
+    })
+    return Array.from(tagSet).sort()
+  }, [data])
+
+  const tagCounts = useMemo(() => {
+    if (!data || !data.views) return {} as Record<string, number>
+    const counts: Record<string, number> = {}
+    Object.values(data.views).forEach(d => {
+      (d?.placements ?? []).forEach(p => {
+        (p.tags ?? []).forEach(t => { counts[t] = (counts[t] ?? 0) + 1 })
+      })
+    })
+    return counts
+  }, [data])
+
+  const layerElementCounts = useMemo(() => {
+    if (!data || !data.views) return {} as Record<number, number>
+    const counts: Record<number, number> = {}
+    for (const layer of layers) {
+      let count = 0
+      Object.values(data.views).forEach(d => {
+        (d?.placements ?? []).forEach(p => {
+          if ((p.tags ?? []).some(t => layer.tags.includes(t))) count++
+        })
+      })
+      counts[layer.id] = count
+    }
+    return counts
+  }, [data, layers])
+
+  const toggleLayerVisibility = useCallback((layer: ViewLayer) => {
+    if (layer.tags.length === 0) return
+    setHiddenTags(prev => {
+      const allHidden = layer.tags.every(t => prev.includes(t))
+      return allHidden
+        ? prev.filter(t => !layer.tags.includes(t))
+        : Array.from(new Set([...prev, ...layer.tags]))
+    })
+  }, [])
+
+  const toggleTagVisibility = useCallback((tag: string) => {
+    setHiddenTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag])
+  }, [])
+
+  // Set page header
+  useEffect(() => {
+    setHeader({ node: <Text fontWeight="medium" fontSize="sm" color="gray.300">Explore</Text> })
+    return () => setHeader(null)
+  }, [setHeader])
+  useEffect(() => {
+    if (sharedToken && canvasReady && !localStorage.getItem(MINI_ONBOARDING_KEY)) {
+      setShowMiniOnboarding(true)
+    }
+  }, [sharedToken, canvasReady])
+
+  const handleInteraction = useCallback(() => {
+    if (showMiniOnboarding) {
+      setShowMiniOnboarding(false)
+      localStorage.setItem(MINI_ONBOARDING_KEY, 'true')
+    }
+  }, [showMiniOnboarding])
+  useEffect(() => {
+    const loader = api.explore.load()
+    loader.then((d) => {
+      if (d.password_required) {
+        setLoading(false)
+      } else {
+        primeWorkspaceGraphSnapshot(d)
+        setData(d)
+        setLoading(false)
+      }
+    }).catch(() => setLoading(false))
+  }, [sharedToken])
+
+  // Fetch tag colors and layers once data is loaded (authenticated users only).
+  // Only fetch from root tree nodes child/nested diagrams would duplicate the same layers.
+  useEffect(() => {
+    if (!data) return
+    let cancelled = false
+    const rootIds = (data.tree ?? []).map(n => n.id)
+    const fetchTagData = async () => {
+      const diagramLayers = await Promise.all(
+        rootIds.map(id => api.workspace.views.layers.list(id)),
+      )
+      if (!cancelled) {
+        // Deduplicate by layer ID in case of any API overlap
+        const seen = new Set<number>()
+        const unique = diagramLayers.flat().filter(l => seen.has(l.id) ? false : (seen.add(l.id), true))
+        setLayers(unique)
+      }
+    }
+    void fetchTagData()
+    return () => { cancelled = true }
+  }, [data])
+
+  const handleCanvasReady = useCallback(() => {
+    setCanvasReady(true)
+  }, [])
+
+  if (!loading && (!data || (data.tree ?? []).length === 0 || !hasPlacements)) {
+    const noDiagrams = !data || (data.tree ?? []).length === 0
+    return (
+      <Center h="100%" flexDir="column" gap={4} px={6} textAlign="center">
+        <VStack spacing={2}>
+          <Text color="gray.300" fontWeight="bold" fontSize="lg">
+            {noDiagrams ? 'No diagrams to explore yet' : 'Your diagrams are empty'}
+          </Text>
+          <Text color="gray.500" fontSize="sm" maxW="400px">
+            {noDiagrams 
+              ? 'Start by creating your first diagram in the workspace.' 
+              : 'Add elements to your diagrams in the editor to see them rendered on this infinite canvas.'}
+          </Text>
+        </VStack>
+        
+        {!sharedToken && (
+          <Button size="sm" colorScheme="blue" onClick={() => navigate('/views')} borderRadius="full" px={6}>
+            {noDiagrams ? 'Create First Diagram' : 'Go to Editor'}
+          </Button>
+        )}
+        {!noDiagrams && <ExplorePageOnboarding hasDiagrams={!noDiagrams} />}
+      </Center>
+    )
+  }
+
+  // ── Main view with loading overlay ────────────────────────────────
+  const showContent = !loading && !!data && canvasReady
+
+  return (
+    <Box position="relative" w="full" h="full" overflow="hidden">
+      {/* Loading overlay - stays until data and canvas are ready */}
+      {(!loading && data && !canvasReady) || loading ? (
+        <Center
+          position="absolute"
+          top={0} left={0} right={0} bottom={0}
+          zIndex={100}
+          bg="var(--bg-primary)"
+        >
+          <Spinner size="xl" color="var(--accent)" />
+        </Center>
+      ) : null}
+
+      {data && (
+        <>
+          <ZUICanvas
+            ref={zuiRef}
+            data={data}
+            onReady={handleCanvasReady}
+            onZoom={handleInteraction}
+            onPan={handleInteraction}
+            highlightedTags={highlightedTags}
+            highlightColor={highlightColor}
+            hiddenTags={hiddenTags}
+            crossBranchSettings={crossBranchSettings}
+            hoverLocked={isTagsOpen}
+          />
+
+          {/* Onboarding overlay */}
+          {data && <ExploreOnboarding hasLinkedNodes={!!(data.navigations?.length > 0)} />}
+          <MiniZoomOnboarding isVisible={showMiniOnboarding} />
+
+          {/* Bottom toolbar */}
+          <Box
+            position="absolute"
+            bottom={4}
+            left="50%"
+            transform="translateX(-50%)"
+            zIndex={10}
+            className="glass"
+            borderRadius="lg"
+            px={2}
+            py={1}
+            opacity={showContent ? 1 : 0}
+            transition="opacity 0.3s"
+          >
+            <HStack spacing={0}>
+              <Tooltip label="Fit View" placement="top" openDelay={200}>
+                <Button
+                  variant="ghost" h="28px" px={2.5}
+                  color="gray.300"
+                  _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                  onClick={() => zuiRef.current?.fitView()}
+                >
+                  <HStack spacing={1.5}>
+                    <FitViewSvg />
+                    <Text fontSize="11px" fontWeight="normal">Fit View</Text>
+                  </HStack>
+                </Button>
+              </Tooltip>
+
+              {shareSlot}
+
+              <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+              <Tooltip label={!crossBranchSettings.enabled ? 'Show branches' : 'Focus on this view'} placement="top" openDelay={200}>
+                <Button
+                  variant="ghost" h="28px" px={2.5}
+                  color={!crossBranchSettings.enabled ? 'var(--accent)' : 'gray.300'}
+                  bg={!crossBranchSettings.enabled ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
+                  _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                  onClick={() => setCrossBranchEnabled(!crossBranchSettings.enabled)}
+                >
+                  <HStack spacing={1.5}>
+                    <FocusSvg />
+                    <Text fontSize="11px" fontWeight="normal">Focus View</Text>
+                    <Box w="6px" h="6px" rounded="full" bg={!crossBranchSettings.enabled ? 'var(--accent)' : 'gray.500'} />
+                  </HStack>
+                </Button>
+              </Tooltip>
+
+              {(allTags.length > 0 || layers.length > 0) && (
+                <>
+                  <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+                  <Popover
+                    isOpen={isTagsOpen}
+                    onClose={() => { onTagsClose(); setHighlightedTags([]); setHighlightColor('') }}
+                    placement="top"
+                    isLazy
+                    closeOnBlur
+                  >
+                    <PopoverTrigger>
+                      <Button
+                        variant="ghost" h="28px" px={2.5}
+                        color={isTagsOpen ? 'var(--accent)' : 'gray.300'}
+                        _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                        onClick={onTagsToggle}
+                      >
+                        <HStack spacing={1.5}>
+                          <TagsIcon />
+                          <Text fontSize="11px" fontWeight="normal">Tags</Text>
+                        </HStack>
+                      </Button>
+                    </PopoverTrigger>
+                    <Portal>
+                      <PopoverContent
+                        bg="glass.bg"
+                        backdropFilter="blur(16px)"
+                        borderColor="glass.border"
+                        boxShadow="panel"
+                        borderRadius="lg"
+                        width="220px"
+                        _focus={{ boxShadow: 'none' }}
+                        onMouseLeave={() => { setHighlightedTags([]); setHighlightColor('') }}
+                      >
+                        <PopoverBody p={2} maxH="360px" overflowY="auto">
+                          {layers.map(layer => {
+                            const isHidden = layer.tags.length > 0 && layer.tags.every(t => hiddenTags.includes(t))
+                            return (
+                              <HStack
+                                key={`layer-${layer.id}`}
+                                px={2}
+                                py={1}
+                                spacing={2}
+                                borderRadius="md"
+                                _hover={{ bg: 'whiteAlpha.100' }}
+                                onMouseEnter={() => { setHighlightedTags(layer.tags); setHighlightColor(layer.color || '') }}
+                                opacity={isHidden ? 0.4 : 1}
+                                transition="opacity 0.15s"
+                              >
+                                <Box w="10px" h="10px" rounded="full" bg={layer.color || 'gray.500'} flexShrink={0} />
+                                <Text fontSize="xs" fontWeight="600" color="white" flex={1} isTruncated>
+                                  {layer.name}
+                                </Text>
+                                <Text fontSize="10px" color="gray.600" flexShrink={0}>
+                                  {layerElementCounts[layer.id] ?? 0}
+                                </Text>
+                                <IconButton
+                                  aria-label={isHidden ? 'Show layer' : 'Hide layer'}
+                                  icon={isHidden ? <EyeOffIcon size={12} /> : <EyeIcon size={12} />}
+                                  size="xs"
+                                  variant="ghost"
+                                  color={isHidden ? 'whiteAlpha.300' : 'whiteAlpha.600'}
+                                  _hover={{ color: 'white', bg: 'whiteAlpha.200' }}
+                                  onClick={(e) => { e.stopPropagation(); toggleLayerVisibility(layer) }}
+                                  flexShrink={0}
+                                />
+                              </HStack>
+                            )
+                          })}
+
+                          {allTags.map(tag => {
+                            const isHidden = hiddenTags.includes(tag)
+                            return (
+                              <HStack
+                                key={`tag-${tag}`}
+                                px={2}
+                                py={1}
+                                spacing={2}
+                                borderRadius="md"
+                                onMouseEnter={() => { setHighlightedTags([tag]); setHighlightColor(tagColors[tag]?.color || '') }}
+                                opacity={isHidden ? 0.4 : 1}
+                                transition="opacity 0.15s"
+                              >
+                                <Box w="8px" h="8px" rounded="full" bg={tagColors[tag]?.color || '#A0AEC0'} flexShrink={0} />
+                                <Text fontSize="xs" fontWeight="600" color="gray.300" flex={1} isTruncated>
+                                  {tag}
+                                </Text>
+                                <Text fontSize="10px" color="gray.600" flexShrink={0}>
+                                  {tagCounts[tag] ?? 0}
+                                </Text>
+                                <IconButton
+                                  aria-label={isHidden ? 'Show tag' : 'Hide tag'}
+                                  icon={isHidden ? <EyeOffIcon size={12} /> : <EyeIcon size={12} />}
+                                  size="xs"
+                                  variant="ghost"
+                                  color={isHidden ? 'whiteAlpha.300' : 'whiteAlpha.600'}
+                                  _hover={{ color: 'white', bg: 'whiteAlpha.200' }}
+                                  onClick={(e) => { e.stopPropagation(); toggleTagVisibility(tag) }}
+                                  flexShrink={0}
+                                />
+                              </HStack>
+                            )
+                          })}
+                        </PopoverBody>
+                      </PopoverContent>
+                    </Portal>
+                  </Popover>
+                </>
+              )}
+            </HStack>
+          </Box>
+    </>
+  )}
+</Box>
+  )
+}
+
+// ── Exports ───────────────────────────────────────────────────────
+
+export default function InfiniteZoom(props: Props) {
+  return <InfiniteZoomInner {...props} />
+}
+
+export function SharedInfiniteZoom(props: Props) {
+  const { token } = useParams()
+  return <InfiniteZoomInner {...props} sharedToken={token} />
+}

package/src/pages/Settings.tsx

@@ -0,0 +1,91 @@
+import { Box, Flex, Text, VStack } from '@chakra-ui/react'
+import { useEffect } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { useSetHeader } from '../components/HeaderContext'
+
+
+
+const DEFAULT_NAV_ITEMS = [
+  { label: 'Appearance', path: '/settings/appearance' },
+]
+
+export interface SettingsProps {
+  extraNavItems?: Array<{ label: string; path: string }>
+}
+
+export default function Settings({ extraNavItems = [] }: SettingsProps) {
+  const navItems = [...extraNavItems, ...DEFAULT_NAV_ITEMS]
+  const navigate = useNavigate()
+  const location = useLocation()
+  const setHeader = useSetHeader()
+
+  // Clear any page-specific header when on settings
+  useEffect(() => {
+    setHeader(null)
+    return () => setHeader(null)
+  }, [setHeader])
+
+
+
+  return (
+    <Flex direction="column" h="100vh">
+      <Flex flex={1} overflow="hidden" direction={{ base: 'column', md: 'row' }}>
+        {/* Sidebar (hidden on small screens) */}
+        <VStack
+          w={{ base: '0', md: '200px' }}
+          display={{ base: 'none', md: 'flex' }}
+          flexShrink={0}
+          bg="var(--bg-panel)"
+          borderRight="1px solid"
+          borderColor="var(--border-main)"
+          py={4}
+          px={2}
+          spacing={1}
+          align="stretch"
+        >
+          <Text
+            fontSize="xs"
+            fontWeight="bold"
+            color="gray.500"
+            textTransform="uppercase"
+            px={2}
+            mb={2}
+          >
+            Settings
+          </Text>
+          {navItems.map((item) => {
+            const active = location.pathname === item.path
+            return (
+              <Box
+                key={item.path}
+                as="button"
+                px={3}
+                py={1.5}
+                fontSize="sm"
+                textAlign="left"
+                borderRadius="md"
+                color={active ? 'gray.100' : 'gray.400'}
+                bg={active ? 'whiteAlpha.100' : 'transparent'}
+                _hover={{ bg: 'whiteAlpha.50', color: 'gray.200' }}
+                onClick={() => navigate(item.path)}
+              >
+                {item.label}
+              </Box>
+            )
+          })}
+        </VStack>
+
+        {/* Main content - allow scrolling on small screens */}
+        <Box
+          flex={1}
+          minH={0}
+          overflowY="auto"
+          p={6}
+          pb={{ base: 'calc(var(--bottomnav-container-h) + env(safe-area-inset-bottom, 0px) + 24px)', sm: 6 }}
+        >
+          <Outlet />
+        </Box>
+      </Flex>
+    </Flex>
+  )
+}

package/src/pages/ViewEditor/EDGE_DISTRIBUTION.md

@@ -0,0 +1,64 @@
+# Edge Distribution System (ViewEditor)
+
+This system prevents connectors from overlapping when sharing nodes or handles. It distributes overlapping edges spatially, aligns them to real React Flow handles, and sorts them to minimize crossings.
+
+## Source Files
+
+- **Data Orchestration**: `src/pages/ViewEditor/hooks/useViewData.ts`
+- **Curved Edges**: `src/components/ViewBezierConnector.tsx`
+- **Straight Edges**: `src/components/ContextStraightConnector.tsx`
+- **Ghost Edges**: `src/components/ProxyConnectorEdge.tsx`
+
+---
+
+## 1. Data Layer Logic (`useViewData.ts`)
+
+The grouping logic is located in the `useEffect` that derives `rfEdges`.
+
+### Grouping Mechanism
+Instead of grouping by edge corridors (source-target pairs), we group by **individual handle usage**.
+1. We collect all connectors attached to each specific `elementId-handle` (e.g., `123-right`).
+2. Both `source` and `target` usages are tracked in the same pool for that handle.
+3. Each usage record stores the `otherNodeCoord` (the Y or X position of the node at the other end).
+
+### Spatial Sorting
+To minimize crossings near the handle, members sharing a handle are sorted based on their `otherNodeCoord`:
+- **Left / Right handles**: Sorted by the `Y` coordinate of the connected node.
+- **Top / Bottom handles**: Sorted by the `X` coordinate of the connected node.
+
+### Edge Data Payload
+Each edge is enriched with distribution metadata in its `data` object:
+- `sourceGroupIndex` / `sourceGroupCount`
+- `targetGroupIndex` / `targetGroupCount`
+- `sourceHandleSide` / `targetHandleSide`
+- `sourceHandleSlot` / `targetHandleSlot`
+
+### Visual Handle Mapping
+- The backend still stores logical handles as `top`, `right`, `bottom`, `left`.
+- React Flow renders each logical side as a capped bead of **5 physical handles**: `side-0` through `side-4`.
+- Group members are mapped onto those 5 slots using their sorted rank. Once a side has more than 5 edges, extra edges reuse the nearest slot instead of creating more unique handle positions.
+
+---
+
+## 2. Rendering Logic
+
+### ViewBezierConnector (Curved Edges)
+- Curved connectors now use the actual React Flow handle positions directly.
+- `useViewData.ts` assigns each edge to a physical `side-slot` handle id so the curve endpoint already lands on the correct circle.
+- Slot spacing is currently `12px`.
+
+### Straight Connectors (Diagonal/Corridors)
+Uses a perpendicular vector shift to ensure distribution works at any angle.
+1. Calculate direction vector `(dx, dy)`.
+2. Compute normal vector `nx = -dy / len`, `ny = dx / len`.
+3. Shift the endpoint by `(offset * nx, offset * ny)`.
+
+---
+
+## 3. Maintenance Notes
+
+- **Ghost Connectors**: `useViewContextNeighbours.ts` currently deduplicates ghost edges by node pairs. However, the `ProxyConnectorEdge` component supports the distribution props if deduplication is ever removed or if they overlap with standard edges.
+- **Slot Count**: Adjust `HANDLE_SLOT_COUNT` in `src/utils/edgeDistribution.ts` to change the number of unique handle positions per side.
+- **Slot Gap**: Adjust `HANDLE_SLOT_GAP` in `src/utils/edgeDistribution.ts` to change the spacing between circles.
+- **Labeling**: Labels are calculated based on the shifted coordinates/path to ensure they stay centered on the distributed line.
+- **Selection**: When an edge is selected, the physical handles used by that edge grow in size so reconnection targets stay obvious.

package/src/pages/ViewEditor/components/EditorMenus.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { Box, Button, Divider, HStack, Text, VStack } from '@chakra-ui/react'
+import {
+  AddElementIcon as AddElementSvg,
+  TrashIcon as TrashSvg,
+  EditIcon as PencilSvg,
+  MoveSourceIcon as MoveSourceSvg,
+  MoveTargetIcon as MoveTargetSvg,
+  GridIcon as GridSvg,
+} from '../../../components/Icons'
+import { useViewEditorContext } from '../context'
+
+const KbdHint = ({ children }: { children: string }) => (
+  <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}>
+    {children}
+  </Box>
+)
+
+interface ConnectorContextMenuProps {
+  menu: { edgeId: number; x: number; y: number } | null
+  onEdit: (edgeId: number) => void
+  onMoveSource: (edgeId: number) => void
+  onMoveTarget: (edgeId: number) => void
+  onDelete: (edgeId: number) => void
+}
+
+export const ConnectorContextMenu: React.FC<ConnectorContextMenuProps> = ({
+  menu,
+  onEdit,
+  onMoveSource,
+  onMoveTarget,
+  onDelete,
+}) => {
+  const { canEdit } = useViewEditorContext()
+  if (!menu) return null
+
+  return (
+    <Box position="absolute" left={`${menu.x}px`} top={`${menu.y}px`}
+      transform="translate(-50%, calc(-100% - 8px))" zIndex={1000} bg="var(--bg-panel)"
+      border="1px solid" borderColor="whiteAlpha.100" rounded="xl" boxShadow="0 8px 32px rgba(0,0,0,0.5)"
+      backdropFilter="blur(20px)" p={1.5} minW="192px"
+      onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
+      <VStack spacing={0} align="stretch">
+        <Button size="sm" variant="ghost" h="30px" px={2.5} justifyContent="flex-start" color="gray.200" _hover={{ bg: 'whiteAlpha.100' }}
+          onClick={() => onEdit(menu.edgeId)}>
+          <HStack spacing={2} w="full"><PencilSvg /><Text fontSize="xs" fontWeight="normal" flex={1}>Edit Connector</Text></HStack>
+        </Button>
+        {canEdit && (
+          <>
+            <Button size="sm" variant="ghost" h="30px" px={2.5} justifyContent="flex-start" color="gray.200" _hover={{ bg: 'whiteAlpha.100' }}
+              onClick={() => onMoveSource(menu.edgeId)}>
+              <HStack spacing={2} w="full"><MoveSourceSvg /><Text fontSize="xs" fontWeight="normal" flex={1}>Move Source</Text></HStack>
+            </Button>
+            <Button size="sm" variant="ghost" h="30px" px={2.5} justifyContent="flex-start" color="gray.200" _hover={{ bg: 'whiteAlpha.100' }}
+              onClick={() => onMoveTarget(menu.edgeId)}>
+              <HStack spacing={2} w="full"><MoveTargetSvg /><Text fontSize="xs" fontWeight="normal" flex={1}>Move Target</Text></HStack>
+            </Button>
+            <Divider borderColor="whiteAlpha.100" my={1} />
+            <Button size="sm" variant="ghost" h="30px" px={2.5} justifyContent="flex-start" color="red.400" _hover={{ bg: 'rgba(254,178,178,0.08)', color: 'red.300' }}
+              onClick={() => onDelete(menu.edgeId)}>
+              <HStack spacing={2} w="full"><TrashSvg /><Text fontSize="xs" fontWeight="normal" flex={1}>Delete</Text></HStack>
+            </Button>
+          </>
+        )}
+        {!canEdit && <Divider borderColor="whiteAlpha.100" my={0} />}
+      </VStack>
+    </Box>
+  )
+}
+
+interface CanvasContextMenuProps {
+  menu: { x: number; y: number; flowX: number; flowY: number } | null
+  onAddElement: (x: number, y: number) => void
+}
+
+export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = ({ menu, onAddElement }) => {
+  const { canEdit, snapToGrid, setSnapToGrid } = useViewEditorContext()
+  if (!menu) return null
+
+  return (
+    <Box position="absolute" left={`${menu.x}px`} top={`${menu.y}px`}
+      transform="translate(-50%, calc(-100% - 6px))" zIndex={1000} bg="var(--bg-panel)"
+      border="1px solid" borderColor="whiteAlpha.100" rounded="xl" boxShadow="0 8px 32px rgba(0,0,0,0.5)"
+      backdropFilter="blur(20px)" p={1.5} minW="180px"
+      onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
+      <VStack spacing={0} align="stretch">
+        <Button size="sm" variant="ghost" h="30px" px={2.5} justifyContent="flex-start"
+          color={canEdit ? 'var(--accent)' : 'gray.500'} _hover={{ bg: 'whiteAlpha.100', color: 'var(--accent)' }}
+          _disabled={{ opacity: 0.4, cursor: 'not-allowed' }} isDisabled={!canEdit}
+          onClick={() => onAddElement(menu.x, menu.y)}>
+          <HStack spacing={2} w="full">
+            <AddElementSvg />
+            <Text fontSize="xs" fontWeight="normal" flex={1}>Add Element</Text>
+            <KbdHint>C</KbdHint>
+          </HStack>
+        </Button>
+        <Divider borderColor="whiteAlpha.100" my={1} />
+        <Button size="sm" variant="ghost" h="30px" px={2.5} justifyContent="flex-start"
+          color="clay.text" _hover={{ bg: 'whiteAlpha.100' }}
+          onClick={() => setSnapToGrid(!snapToGrid)}>
+          <HStack spacing={2} w="full">
+            <GridSvg />
+            <Text fontSize="xs" fontWeight="normal" flex={1}>Snap to Grid</Text>
+            {snapToGrid && <Box w="6px" h="6px" rounded="full" bg="var(--accent)" />}
+          </HStack>
+        </Button>
+      </VStack>
+    </Box>
+  )
+}