@tldiagram/core-ui 2.0.3 → 2.0.5

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, Slider, SliderTrack, SliderFilledTrack, SliderThumb, useDisclosure
+  HStack, Tooltip, Button, Box, Text, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, IconButton, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Switch, VStack, useDisclosure
 } from '@chakra-ui/react'
 import { DownloadIcon } from '@chakra-ui/icons'
 import {
@@ -15,12 +15,21 @@ import {
   CollapseExtrasIcon as CollapseExtrasSvg,
   FocusIcon as FocusSvg,
   TagsIcon,
+  ChevronDownIcon,
 } from './Icons'
 import { KbdHint } from './PanelUI'
 import { RedoSvg, UndoSvg } from './ViewDrawMenu'
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 import type { Tag, ViewLayer } from '../types'
 
+const DENSITY_STOPS = [
+  { value: -2, label: 'Quiet' },
+  { value: -1, label: 'Lean' },
+  { value: 0, label: 'Normal' },
+  { value: 1, label: 'Rich' },
+  { value: 2, label: 'Full' },
+] as const
+
 export interface ViewFloatingMenuProps extends ViewFloatingMenuSlots {
   handleAddElementAtCenter: () => void
   drawingMode: boolean
@@ -105,7 +114,11 @@ function ViewFloatingMenu({
 }: ViewFloatingMenuProps) {
   const { canEdit } = useViewEditorContext()
   const { isOpen: isTagsOpen, onClose: onTagsClose, onToggle: onTagsToggle } = useDisclosure()
+  const { isOpen: isFiltersOpen, onClose: onFiltersClose, onToggle: onFiltersToggle } = useDisclosure()
   const [draftDensityLevel, setDraftDensityLevel] = React.useState(densityLevel)
+  const activeDensityLabel = DENSITY_STOPS.find((stop) => stop.value === draftDensityLevel)?.label ?? 'Normal'
+  const showFilters = !hideFocusView || !!onDensityLevelChange
+  const hasActiveFilters = (!hideFocusView && focusMode) || (!!onDensityLevelChange && densityLevel !== 0)
 
   React.useEffect(() => {
     setDraftDensityLevel(densityLevel)
@@ -191,26 +204,152 @@ function ViewFloatingMenu({
         </>
       )}
 
-      {!hideFocusView && (
+      {showFilters && (
         <>
           <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
-          <Tooltip label={focusMode ? 'Show context' : 'Focus on this view'} placement="top" openDelay={200}>
-            <Button
-              variant="ghost"
-              h="28px"
-              px={2.5}
-              color={focusMode ? 'var(--accent)' : 'gray.300'}
-              bg={focusMode ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
-              _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
-              onClick={() => onFocusModeChange(!focusMode)}
-            >
-              <HStack spacing={1.5}>
-                <FocusSvg />
-                <Text fontSize="11px" fontWeight="normal">Focus View</Text>
-                <Box w="6px" h="6px" rounded="full" bg={focusMode ? 'var(--accent)' : 'gray.500'} />
-              </HStack>
-            </Button>
-          </Tooltip>
+          <Popover isOpen={isFiltersOpen} onClose={onFiltersClose} placement="top" isLazy closeOnBlur>
+            <PopoverTrigger>
+              <Button
+                variant="ghost"
+                h="28px"
+                px={2.5}
+                color={isFiltersOpen || hasActiveFilters ? 'var(--accent)' : 'gray.300'}
+                bg={hasActiveFilters ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
+                _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                onClick={onFiltersToggle}
+                aria-label="Open filters"
+              >
+                <HStack spacing={1.5}>
+                  <FocusSvg />
+                  <Text fontSize="11px" fontWeight={hasActiveFilters ? 'semibold' : 'normal'}>Filters</Text>
+                  {hasActiveFilters && <Box w="6px" h="6px" rounded="full" bg="var(--accent)" />}
+                  <ChevronDownIcon size={10} strokeWidth={3.5} />
+                </HStack>
+              </Button>
+            </PopoverTrigger>
+            <Portal>
+              <PopoverContent
+                bg="linear-gradient(180deg, rgba(var(--bg-main-rgb), 0.98) 0%, rgba(var(--bg-main-rgb), 0.92) 100%)"
+                backdropFilter="blur(22px)"
+                borderColor="whiteAlpha.100"
+                boxShadow="0 18px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.04)"
+                borderRadius="lg"
+                width="280px"
+                _focus={{ boxShadow: 'none' }}
+              >
+                <PopoverBody p={3}>
+                  <VStack align="stretch" spacing={3}>
+                    {!hideFocusView && (
+                      <HStack
+                        justify="space-between"
+                        spacing={3}
+                        px={2.5}
+                        py={2}
+                        rounded="md"
+                        bg={focusMode ? 'rgba(var(--accent-rgb), 0.10)' : 'whiteAlpha.50'}
+                        border="1px solid"
+                        borderColor={focusMode ? 'rgba(var(--accent-rgb), 0.22)' : 'whiteAlpha.100'}
+                      >
+                        <HStack spacing={2.5} minW={0}>
+                          <Box color={focusMode ? 'var(--accent)' : 'gray.400'} flexShrink={0}>
+                            <FocusSvg />
+                          </Box>
+                          <Box minW={0}>
+                            <Text fontSize="xs" fontWeight="semibold" color="whiteAlpha.900">Hide External</Text>
+                          </Box>
+                        </HStack>
+                        <Switch
+                          size="sm"
+                          isChecked={focusMode}
+                          onChange={(event) => onFocusModeChange(event.target.checked)}
+                          colorScheme="teal"
+                          flexShrink={0}
+                          aria-label="Toggle external view"
+                        />
+                      </HStack>
+                    )}
+
+                    {onDensityLevelChange && (
+                      <Box
+                        px={2.5}
+                        py={2.5}
+                        rounded="md"
+                        bg="whiteAlpha.50"
+                        border="1px solid"
+                        borderColor="whiteAlpha.100"
+                      >
+                        <HStack justify="space-between" mb={2.5}>
+                          <Box>
+                            <Text fontSize="xs" fontWeight="semibold" color="whiteAlpha.900">Density</Text>
+                            <Text fontSize="10px" color="whiteAlpha.600">Control how much detail is shown</Text>
+                          </Box>
+                          <Text
+                            fontSize="10px"
+                            fontWeight="bold"
+                            color="var(--accent)"
+                            bg="rgba(var(--accent-rgb), 0.10)"
+                            border="1px solid"
+                            borderColor="rgba(var(--accent-rgb), 0.18)"
+                            rounded="full"
+                            px={2}
+                            py={0.5}
+                          >
+                            {activeDensityLabel}
+                          </Text>
+                        </HStack>
+                        <Box px={1} pt={1} pb={0.5}>
+                          <Slider
+                            aria-label="Density"
+                            min={-2}
+                            max={2}
+                            step={1}
+                            value={draftDensityLevel}
+                            onChange={setDraftDensityLevel}
+                            onChangeEnd={(value) => {
+                              setDraftDensityLevel(value)
+                              onDensityLevelChange(value)
+                            }}
+                            focusThumbOnChange={false}
+                          >
+                            <SliderTrack h="4px" bg="whiteAlpha.200">
+                              <SliderFilledTrack bg="var(--accent)" />
+                            </SliderTrack>
+                            {DENSITY_STOPS.map((stop) => (
+                              <Box
+                                key={stop.value}
+                                position="absolute"
+                                left={`${((stop.value + 2) / 4) * 100}%`}
+                                top="50%"
+                                transform="translate(-50%, -50%)"
+                                w={stop.value === draftDensityLevel ? '6px' : '2px'}
+                                h={stop.value === draftDensityLevel ? '6px' : '10px'}
+                                rounded="full"
+                                bg={draftDensityLevel >= stop.value ? 'var(--accent)' : 'whiteAlpha.500'}
+                                pointerEvents="none"
+                              />
+                            ))}
+                            <SliderThumb boxSize="14px" bg="white" border="2px solid" borderColor="var(--accent)" />
+                          </Slider>
+                          <HStack justify="space-between" mt={2} px={0.5}>
+                            {DENSITY_STOPS.map((stop) => (
+                              <Text
+                                key={stop.value}
+                                fontSize="9px"
+                                fontWeight={stop.value === draftDensityLevel ? 'bold' : 'medium'}
+                                color={stop.value === draftDensityLevel ? 'whiteAlpha.900' : 'whiteAlpha.500'}
+                              >
+                                {stop.label}
+                              </Text>
+                            ))}
+                          </HStack>
+                        </Box>
+                      </Box>
+                    )}
+                  </VStack>
+                </PopoverBody>
+              </PopoverContent>
+            </Portal>
+          </Popover>
         </>
       )}
       <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
@@ -325,55 +464,6 @@ 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'}

package/src/index.ts

@@ -8,7 +8,7 @@
  */
 
 // ─── Pages ───────────────────────────────────────────────────────────────────
-export { default as ViewEditor } from './pages/ViewEditor'
+export { default as ViewEditor, type ViewEditorPermissions } from './pages/ViewEditor'
 export { default as ViewsPage } from './pages/Views'
 export { default as ViewsGrid } from './pages/ViewsGrid'
 export { default as Dependencies } from './pages/Dependencies'

package/src/pages/InfiniteZoom.tsx

@@ -257,12 +257,12 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
             {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.' 
+            {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'}
@@ -349,7 +349,7 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
                 onEnabledChange={setCrossBranchEnabled}
                 onBudgetChange={setCrossBranchConnectorBudget}
                 onPriorityChange={setCrossBranchConnectorPriority}
-                label="Branches"
+                label="Filters"
               />
 
               {(allTags.length > 0 || layers.length > 0) && (

package/src/pages/ViewEditor/hooks/useCanvasInteractions.ts

@@ -1008,6 +1008,43 @@ export function useCanvasInteractions({
     document.addEventListener('pointercancel', up)
   }, [canEdit, clearHandleReconnectListeners, performReconnect, rfNodesRef, _rfEdgesRef, syncHandleReconnectDrag])
 
+  const stableOnReconnectPick = useCallback(async (targetElementId: number) => {
+    const picking = reconnectPickingRef.current
+    if (!canEdit || !picking) return false
+
+    const oldConnector = _rfEdgesRef.current.find((candidate) => candidate.id === String(picking.edgeId))
+    const pickedNode = rfNodesRef.current.find((node) => node.id === String(targetElementId))
+    if (!oldConnector || !pickedNode) return false
+
+    const fixedNodeId = picking.endpoint === 'source' ? oldConnector.target : oldConnector.source
+    if (fixedNodeId === pickedNode.id) return false
+    const fixedNode = rfNodesRef.current.find((node) => node.id === fixedNodeId)
+    if (!fixedNode) return false
+
+    const closest = picking.endpoint === 'source'
+      ? findClosestHandles(pickedNode, fixedNode)
+      : findClosestHandles(fixedNode, pickedNode)
+    const newConnection: Connection = picking.endpoint === 'source'
+      ? {
+        source: pickedNode.id,
+        sourceHandle: ensureVisualHandleId(closest.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? closest.sourceHandle,
+        target: fixedNode.id,
+        targetHandle: ensureVisualHandleId(closest.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? closest.targetHandle,
+      }
+      : {
+        source: fixedNode.id,
+        sourceHandle: ensureVisualHandleId(closest.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? closest.sourceHandle,
+        target: pickedNode.id,
+        targetHandle: ensureVisualHandleId(closest.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? closest.targetHandle,
+      }
+
+    reconnectPickingRef.current = null
+    setReconnectPicking(null)
+    setConnectorLongPressMenu(null)
+    await performReconnect(oldConnector, newConnection)
+    return true
+  }, [canEdit, _rfEdgesRef, performReconnect, rfNodesRef])
+
   // ── Click-connect ghost cursor tracking ────────────────────────────────────
   useEffect(() => {
     if (!clickConnectMode) {
@@ -1528,6 +1565,7 @@ export function useCanvasInteractions({
     stableOnConnectTo,
     stableOnInteractionStart,
     stableOnStartHandleReconnect,
+    stableOnReconnectPick,
     showAddingElementAt,
     // RF event handlers
     onNodesChange,

package/src/pages/ViewEditor/hooks/useViewData.ts

@@ -227,7 +227,13 @@ export function useViewData({
       queryFn: () => api.workspace.views.treeAround(viewId, { ancestorLevels: 2, descendantLevels: 2 }),
       staleTime: 0,
     }).catch(() => null)
-    if (tree) useStore.getState().setTreeData(tree)
+    if (tree) {
+      const links = buildViewContentLinks(tree, viewId, viewElementsRef.current)
+      useStore.getState().setTreeData(tree)
+      useStore.getState().setLinksMap(links.linksMap)
+      useStore.getState().setParentLinksMap(links.parentLinksMap)
+      useStore.getState().setIncomingLinks(links.incomingLinks)
+    }
   }, [queryClient, viewId])
 
   // ── Fetch view content ──────────────────────────────────────────────────
@@ -281,8 +287,12 @@ export function useViewData({
     if (fresh) {
       setViewElements(fresh.placements)
       setConnectors(fresh.connectors)
+      const links = buildViewContentLinks(treeDataRef.current, viewId, fresh.placements)
+      setLinksMap(links.linksMap)
+      setParentLinksMap(links.parentLinksMap)
+      useStore.getState().setIncomingLinks(links.incomingLinks)
     }
-  }, [queryClient, setConnectors, setViewElements, viewId])
+  }, [queryClient, setConnectors, setLinksMap, setParentLinksMap, setViewElements, viewId])
 
   // ── Element mutation helpers ───────────────────────────────────────────────
   const handleElementDeleted = useCallback((deletedId: number) => {

package/src/pages/ViewEditor/index.tsx

@@ -100,6 +100,8 @@ const nodeTypes = {
 const edgeTypes = { default: ViewBezierConnector, contextStraightConnector: ContextStraightConnector, proxyConnectorEdge: ProxyConnectorEdge }
 const EMPTY_LINKS: ViewConnector[] = []
 const VIEW_EDITOR_MIN_ZOOM_FLOOR = 0.12
+const VIEW_EDITOR_INITIAL_FIT_PADDING = 0.25
+const VIEW_EDITOR_FOCUS_FIT_PADDING = 0.35
 const VIEW_EDITOR_EMPTY_EXTENT_RATIO = 0.75
 const VIEW_EDITOR_PAN_MARGIN_RATIO = 0.25
 const VIEW_EDITOR_PAN_MARGIN_MIN = 180
@@ -159,6 +161,19 @@ function viewSnapshotsEqual(left: ViewMetadataSnapshot, right: ViewMetadataSnaps
   return left.id === right.id && left.name === right.name && (left.level_label ?? '') === (right.level_label ?? '')
 }
 
+function nodesMatchCurrentView(nodes: RFNode[], elements: PlacedElement[], viewId: number | null) {
+  if (viewId === null || elements.length === 0) return false
+  if (!elements.every((element) => element.view_id === viewId)) return false
+
+  const nodesById = new Map(nodes.map((node) => [node.id, node]))
+  return elements.every((element) => {
+    const node = nodesById.get(String(element.element_id))
+    return node !== undefined &&
+      Math.abs(node.position.x - (element.position_x ?? 0)) < 0.5 &&
+      Math.abs(node.position.y - (element.position_y ?? 0)) < 0.5
+  })
+}
+
 function alphaColor(color: string, opacity: number): string {
   if (opacity >= 1) return color
   return `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent)`
@@ -193,12 +208,21 @@ function canonicalNodePairKey(leftId: string, rightId: string) {
 
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface Props extends CoreUISlots {
+export interface ViewEditorPermissions {
+  canEdit?: boolean
+  isOwner?: boolean
+  isFreePlan?: boolean
+}
+
+interface Props extends CoreUISlots, ViewEditorPermissions {
   demoOptions?: ViewEditorDemoOptions
 }
 
 function ViewEditorInner({
   demoOptions,
+  canEdit = true,
+  isOwner = true,
+  isFreePlan = false,
   canvasOverlaySlot,
   toolbarSlot,
   shareSlot,
@@ -225,10 +249,6 @@ function ViewEditorInner({
     undo: undoViewEdit,
     redo: redoViewEdit,
   } = useViewEditHistory()
-  const canEdit = true
-  const isOwner = true
-  const isFreePlan = false
-
   const setHeader = useSetHeader()
   const isMobileLayout = useBreakpointValue({ base: true, md: false }) ?? false
   const [densityLevel, setDensityLevel] = useState(0)
@@ -465,6 +485,7 @@ function ViewEditorInner({
   const stableOnConnectToRef = useRef<(targetElementId: number) => Promise<void>>(async () => { })
   const stableOnInteractionStartRef = useRef<(elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => void>(() => { })
   const stableOnStartHandleReconnectRef = useRef<(args: { edgeId: string; endpoint: 'source' | 'target'; handleId: string; clientX: number; clientY: number }) => void>(() => { })
+  const stableOnReconnectPickRef = useRef<(targetElementId: number) => Promise<boolean>>(async () => false)
 
   // ── Drawing engine ────────────────────────────────────────────────────────
   const drawing = useDrawingEngine(viewId)
@@ -498,18 +519,21 @@ function ViewEditorInner({
     stableOnZoomOut: useCallback(async (id: number) => { await stableOnZoomOutRef.current(id) }, []),
     stableOnNavigateToView: useCallback((id: number) => { stableOnNavigateToViewRef.current(id) }, []),
     stableOnSelect: useCallback((obj: PlacedElement) => {
-      setSelectedEdge(null)
-      setSelectedProxyConnectorDetails(null)
-      closeProxyConnectorPanelRef.current()
-      closeConnectorPanelRef.current()
-      setSelectedElement({
-        id: obj.element_id, name: obj.name, description: obj.description, kind: obj.kind,
-        technology: obj.technology, url: obj.url, logo_url: obj.logo_url,
-        technology_connectors: obj.technology_connectors, tags: obj.tags, repo: obj.repo,
-        branch: obj.branch, file_path: obj.file_path, language: obj.language,
-        created_at: '', updated_at: '', has_view: false, view_label: null,
+      void stableOnReconnectPickRef.current(obj.element_id).then((handled) => {
+        if (handled) return
+        setSelectedEdge(null)
+        setSelectedProxyConnectorDetails(null)
+        closeProxyConnectorPanelRef.current()
+        closeConnectorPanelRef.current()
+        setSelectedElement({
+          id: obj.element_id, name: obj.name, description: obj.description, kind: obj.kind,
+          technology: obj.technology, url: obj.url, logo_url: obj.logo_url,
+          technology_connectors: obj.technology_connectors, tags: obj.tags, repo: obj.repo,
+          branch: obj.branch, file_path: obj.file_path, language: obj.language,
+          created_at: '', updated_at: '', has_view: false, view_label: null,
+        })
+        openElementPanelRef.current()
       })
-      openElementPanelRef.current()
     }, []),
     stableOnOpenCodePreview: useCallback((elementId: number) => {
       const obj = previewViewElementsRef.current.find((o) => o.element_id === elementId)
@@ -669,7 +693,7 @@ function ViewEditorInner({
   useEffect(() => {
     const unsub = vscodeBridge.onMessage(async (msg: ExtensionToWebviewMessage) => {
       if (msg.type === 'focus-element') {
-        fitView({ nodes: [{ id: String(msg.elementId) }], duration: 800, padding: 100 })
+        fitView({ nodes: [{ id: String(msg.elementId) }], duration: 800, padding: VIEW_EDITOR_FOCUS_FIT_PADDING })
       } else if (msg.type === 'element-placed') {
         if (viewId === null) return
         try {
@@ -1032,7 +1056,8 @@ function ViewEditorInner({
     stableOnConnectToRef.current = canvas.stableOnConnectTo
     stableOnInteractionStartRef.current = canvas.stableOnInteractionStart
     stableOnStartHandleReconnectRef.current = canvas.stableOnStartHandleReconnect
-  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect])
+    stableOnReconnectPickRef.current = canvas.stableOnReconnectPick
+  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect, canvas.stableOnReconnectPick])
   const viewName = view?.name ?? null
 
   const [expandedAncestorGroups, setExpandedAncestorGroups] = useState<Set<string>>(new Set())
@@ -1274,6 +1299,7 @@ function ViewEditorInner({
     if (!rfReadyRef.current || !needsFitView.current) return
     const nodes = rfNodesRef.current
     if (nodes.length === 0) return
+    if (!nodesMatchCurrentView(nodes, viewElementsRef.current, viewIdRef.current)) return
     if (!nodes.every((n) => typeof n.width === 'number' && n.width > 0 && typeof n.height === 'number' && n.height > 0)) return
 
     if (clampedRevealProgress !== null) {
@@ -1283,13 +1309,17 @@ function ViewEditorInner({
       return
     }
 
-    const ok = safeFitView({ duration: 0, padding: 400 })
+    const ok = safeFitView({ duration: 0, padding: VIEW_EDITOR_INITIAL_FIT_PADDING, minZoom: computedMinZoom, maxZoom: 4 })
     if (ok) needsFitView.current = false
     else setTimeout(() => { if (needsFitView.current) maybeFitView() }, 50)
-  }, [applyDemoRevealViewport, clampedRevealProgress, safeFitView, rfNodesRef])
+  }, [applyDemoRevealViewport, clampedRevealProgress, computedMinZoom, safeFitView, rfNodesRef, viewElementsRef, viewIdRef])
 
   const onRFInit = useCallback(() => { rfReadyRef.current = true; maybeFitView() }, [maybeFitView])
 
+  useEffect(() => {
+    needsFitView.current = true
+  }, [viewId])
+
   useEffect(() => { maybeFitView() }, [rfNodes, maybeFitView])
 
   useEffect(() => {
@@ -1310,7 +1340,6 @@ function ViewEditorInner({
     closeElementPanelRef.current()
     closeConnectorPanelRef.current()
     closeProxyConnectorPanelRef.current()
-    needsFitView.current = true
   }, [clearEditHistory, viewId])
 
   // ── Dynamic viewport bounds ────────────────────────────────────────────────
@@ -1756,7 +1785,7 @@ function ViewEditorInner({
               menu={connectorLongPressMenu}
               onEdit={(edgeId) => { const connector = connectors.find((e) => e.id === edgeId); if (connector) { setSelectedEdge(connector); connectorPanel.onOpen() }; setConnectorLongPressMenu(null) }}
               onMoveSource={(edgeId) => { const picking = { edgeId, endpoint: 'source' as const }; reconnectPickingRef.current = picking; setReconnectPicking(picking); setConnectorLongPressMenu(null) }}
-              onMoveTarget={(edgeId) => { const picking = { edgeId, endpoint: 'target' as const }; reconnectPickingRef.current = picking; setConnectorLongPressMenu(null) }}
+              onMoveTarget={(edgeId) => { const picking = { edgeId, endpoint: 'target' as const }; reconnectPickingRef.current = picking; setReconnectPicking(picking); setConnectorLongPressMenu(null) }}
               onDelete={async (edgeId) => {
                 setConnectorLongPressMenu(null)
                 if (!viewId) return

package/src/pages/ViewsGrid.tsx

@@ -832,7 +832,7 @@ function ViewGridInner({ onShare, treeData, loading, focusedId, onFocusChange, s
           onStartRename: () => startEdit(n.id, n.name),
           onDetails: () => handleDetailsOpen(n.id),
           onDelete: () => { setDeleteTargetId(n.id); onDeleteOpen() },
-          onShare: onShare ? () => onShare(n.id) : () => {},
+          onShare: onShare ? () => onShare(n.id) : () => { },
           onEditNameChange: setEditName,
           onEditCommit: commitEdit,
           onEditCancel: cancelEdit,
@@ -1088,7 +1088,7 @@ function ViewGridInner({ onShare, treeData, loading, focusedId, onFocusChange, s
               <Text color="gray.600" fontSize="sm" mb={1}>No views yet.</Text>
               {canEdit && (
                 <>
-                  <Text color="gray.700" fontSize="xs" mb={4}>Click "New Diagram" to get started.</Text>
+                  <Text color="gray.700" fontSize="xs" mb={4}>Click "+ New" to get started.</Text>
 
                 </>
               )}

package/src/utils/string.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { truncate } from './string'
+
+describe('truncate', () => {
+  it('does not truncate strings shorter than or equal to the limit', () => {
+    expect(truncate('hello', 10)).toBe('hello')
+    expect(truncate('1234567890', 10)).toBe('1234567890')
+  })
+
+  it('truncates strings longer than the limit and adds ellipsis', () => {
+    expect(truncate('hello world', 5)).toBe('hello...')
+    expect(truncate('12345678901', 10)).toBe('1234567890...')
+  })
+
+  it('uses default limit of 15', () => {
+    expect(truncate('123456789012345')).toBe('123456789012345')
+    expect(truncate('1234567890123456')).toBe('123456789012345...')
+  })
+})

package/src/utils/string.ts

@@ -0,0 +1,7 @@
+/**
+ * Truncates a string to a specified length and appends an ellipsis.
+ */
+export const truncate = (str: string, limit: number = 15): string => {
+  if (str.length <= limit) return str
+  return str.slice(0, limit) + '...'
+}