@tldiagram/core-ui 1.89.7 → 1.91.0

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.d.ts

@@ -161,7 +161,7 @@ export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _d
         clientX: number;
         clientY: number;
     }) => void;
-    showAddingElementAt: (clientX: number, clientY: number, expandResults?: boolean, mode?: "add" | "connect") => void;
+    showAddingElementAt: (clientX: number, clientY: number, expandResults?: boolean, mode?: "add" | "connect", forceConnect?: boolean) => void;
     onNodesChange: (changes: NodeChange[]) => void;
     onEdgesChange: (changes: EdgeChange[]) => void;
     onNodeDragStart: NodeDragHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.89.7",
+  "version": "1.91.0",
   "type": "module",
   "repository": {
     "type": "git",

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

@@ -26,7 +26,7 @@ interface ConnectorContextMenuProps {
   onDelete: (edgeId: number) => void
 }
 
-export const ConnectorContextMenu: React.FC<ConnectorContextMenuProps> = ({
+export const ConnectorContextMenu: React.FC<ConnectorContextMenuProps> = React.memo(({
   menu,
   onEdit,
   onMoveSource,
@@ -68,14 +68,15 @@ export const ConnectorContextMenu: React.FC<ConnectorContextMenuProps> = ({
       </VStack>
     </Box>
   )
-}
+})
+ConnectorContextMenu.displayName = 'ConnectorContextMenu'
 
 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 }) => {
+export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = React.memo(({ menu, onAddElement }) => {
   const { canEdit, snapToGrid, setSnapToGrid } = useViewEditorContext()
   if (!menu) return null
 
@@ -109,4 +110,5 @@ export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = ({ menu, onAd
       </VStack>
     </Box>
   )
-}
+})
+CanvasContextMenu.displayName = 'CanvasContextMenu'

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

@@ -22,7 +22,7 @@ interface EditorOverlaysProps {
   rfNodes: RFNode[]
 }
 
-export const EditorOverlays: React.FC<EditorOverlaysProps> = ({
+export const EditorOverlays: React.FC<EditorOverlaysProps> = React.memo(({
   connectGhostPos,
   clickConnectMode,
   clickConnectCursorPos,
@@ -169,4 +169,5 @@ export const EditorOverlays: React.FC<EditorOverlaysProps> = ({
 
     </>
   )
-}
+})
+EditorOverlays.displayName = 'EditorOverlays'

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

@@ -6,7 +6,7 @@ interface EmptyCanvasStateProps {
   hasNodes: boolean
 }
 
-export const EmptyCanvasState: React.FC<EmptyCanvasStateProps> = ({ isMobile, hasNodes }) => {
+export const EmptyCanvasState: React.FC<EmptyCanvasStateProps> = React.memo(({ isMobile, hasNodes }) => {
   if (hasNodes) return null
 
   return (
@@ -39,4 +39,5 @@ export const EmptyCanvasState: React.FC<EmptyCanvasStateProps> = ({ isMobile, ha
       </Text>
     </Box>
   )
-}
+})
+EmptyCanvasState.displayName = 'EmptyCanvasState'

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

@@ -36,7 +36,6 @@ import {
 } from '../../../utils/edgeDistribution'
 
 const SNAP_RADIUS = 75
-const CONTEXT_BOUNDARY_INSET = 36
 
 interface CanvasInteractionOptions {
   viewId: number | null
@@ -260,37 +259,29 @@ export function useCanvasInteractions({
   const openConnectorPanelRef = useRef(openConnectorPanel)
   openConnectorPanelRef.current = openConnectorPanel
 
-  const resolvePickerMode = useCallback((flowX: number, flowY: number, preferredMode: 'add' | 'connect') => {
+  const resolvePickerMode = useCallback((flowX: number, flowY: number, preferredMode: 'add' | 'connect', forceConnect = false) => {
     if (preferredMode !== 'connect') return preferredMode
+    if (forceConnect) return 'connect'
 
-    const mainNodes = rfNodesRef.current.filter((node) => node.type === 'elementNode')
-    if (mainNodes.length === 0) return preferredMode
-
-    let minX = Infinity
-    let minY = Infinity
-    let maxX = -Infinity
-    let maxY = -Infinity
-
-    for (const node of mainNodes) {
-      const width = node.width ?? 200
-      const height = node.height ?? 90
-      minX = Math.min(minX, node.position.x)
-      minY = Math.min(minY, node.position.y)
-      maxX = Math.max(maxX, node.position.x + width)
-      maxY = Math.max(maxY, node.position.y + height)
-    }
+    const boundaryNode = rfNodesRef.current.find((node) => node.type === 'ContextBoundaryElement')
+    if (!boundaryNode) return 'add'
+
+    const boundaryData = boundaryNode.data as { width?: number; height?: number } | undefined
+    const width = boundaryData?.width ?? boundaryNode.width
+    const height = boundaryData?.height ?? boundaryNode.height
+    if (width == null || height == null) return 'add'
 
     const withinBoundary =
-      flowX >= minX - CONTEXT_BOUNDARY_INSET &&
-      flowX <= maxX + CONTEXT_BOUNDARY_INSET &&
-      flowY >= minY - CONTEXT_BOUNDARY_INSET &&
-      flowY <= maxY + CONTEXT_BOUNDARY_INSET
+      flowX >= boundaryNode.position.x &&
+      flowX <= boundaryNode.position.x + width &&
+      flowY >= boundaryNode.position.y &&
+      flowY <= boundaryNode.position.y + height
 
     return withinBoundary ? 'add' : 'connect'
   }, [rfNodesRef])
 
   // ── showAddingElementAt ─────────────────────────────────────────────────────
-  const showAddingElementAt = useCallback((clientX: number, clientY: number, expandResults = false, mode: 'add' | 'connect' = 'add') => {
+  const showAddingElementAt = useCallback((clientX: number, clientY: number, expandResults = false, mode: 'add' | 'connect' = 'add', forceConnect = false) => {
     const rect = containerRef.current?.getBoundingClientRect()
     if (!rect) return
     const flowPos = screenToFlowPositionRef.current({ x: clientX, y: clientY })
@@ -305,7 +296,7 @@ export function useCanvasInteractions({
       ? Math.max(100, Math.min(px, rect.width - 450))
       : Math.max(120, Math.min(px, rect.width - 120))
     const y = Math.max(40, Math.min(py, rect.height - 250))
-    setAddingElementAt({ x, y, flowX, flowY, expandResults, mode: resolvePickerMode(flowX, flowY, mode) })
+    setAddingElementAt({ x, y, flowX, flowY, expandResults, mode: resolvePickerMode(flowX, flowY, mode, forceConnect) })
   }, [containerRef, snapToGrid, resolvePickerMode])
 
   // ── Inline element adder handlers ───────────────────────────────────────────
@@ -633,7 +624,7 @@ export function useCanvasInteractions({
     } else {
       setPendingConnectionSource(sourceElementId)
       suppressNextPaneClickRef.current = true
-      showAddingElementAt(clientX, clientY, true, 'connect')
+      showAddingElementAt(clientX, clientY, true, 'connect', 'shiftKey' in event && event.shiftKey)
     }
   }, [canEdit, setConnectors, showAddingElementAt, rfNodesRef, viewIdRef])
 
@@ -913,7 +904,7 @@ export function useCanvasInteractions({
       } else {
         setInteractionSourceId(null)
         setPendingConnectionSource(sourceId)
-        showAddingElementAt(e.clientX, e.clientY, true, 'connect')
+        showAddingElementAt(e.clientX, e.clientY, true, 'connect', e.shiftKey)
       }
       return
     }

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

@@ -112,7 +112,7 @@ export function useViewContextNeighbours({
     const centerY = (minY + maxY) / 2
     const boundaryW = maxX - minX
     const boundaryH = maxY - minY
-    const totalInset = 100
+    const totalInset = 200
     const padding = 180
     const radiusX = boundaryW / 2 + padding
     const radiusY = boundaryH / 2 + padding

package/src/pages/ViewEditor/index.tsx

@@ -13,7 +13,7 @@ import ReactFlow, {
   useReactFlow,
   applyNodeChanges,
 } from 'reactflow'
-import type { EdgeMarker as RFEdgeMarker, Node as RFNode, NodeChange } from 'reactflow'
+import type { Edge as RFEdge, EdgeMarker as RFEdgeMarker, Node as RFNode, NodeChange } from 'reactflow'
 import 'reactflow/dist/style.css'
 import { toPng, toSvg } from 'html-to-image'
 import {
@@ -94,6 +94,11 @@ 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_EMPTY_EXTENT_RATIO = 0.75
+const VIEW_EDITOR_PAN_MARGIN_RATIO = 0.25
+const VIEW_EDITOR_PAN_MARGIN_MIN = 180
+const VIEW_EDITOR_PAN_MARGIN_MAX = 720
 
 function alphaColor(color: string, opacity: number): string {
   if (opacity >= 1) return color
@@ -703,64 +708,105 @@ function ViewEditorInner({
   const contextNodeIdsRef = useRef<Set<string>>(new Set())
   useEffect(() => {
     contextNodeIdsRef.current = new Set(contextNodes.map((n) => n.id))
-    setLiveContextNodes((prev) =>
-      contextNodes.map((n) => {
-        const existing = prev.find((p) => p.id === n.id)
+    setLiveContextNodes((prev) => {
+      const prevById = new Map(prev.map((p) => [p.id, p]))
+      return contextNodes.map((n) => {
+        const existing = prevById.get(n.id)
         if (existing?.width != null && existing?.height != null) {
           return { ...n, width: existing.width, height: existing.height }
         }
         return n
       })
-    )
+    })
   }, [contextNodes])
 
+  const fadedNodeCacheRef = useRef<WeakMap<RFNode, RFNode>>(new WeakMap())
+  const fadedEdgeCacheRef = useRef<WeakMap<RFEdge, RFEdge>>(new WeakMap())
+
   const flowNodes = useMemo(() => {
-    const allNodes = [...liveContextNodes, ...rfNodes]
-    const selectedNodeIds = new Set(allNodes.filter((n) => n.selected).map((n) => n.id))
+    const allNodes = liveContextNodes.length === 0
+      ? rfNodes
+      : rfNodes.length === 0
+        ? liveContextNodes
+        : [...liveContextNodes, ...rfNodes]
+
+    let hasNodeSel = false
+    const selectedNodeIds = new Set<string>()
+    for (const n of allNodes) {
+      if (n.selected) { selectedNodeIds.add(n.id); hasNodeSel = true }
+    }
+
+    const allEdges = contextConnectors.length === 0
+      ? rfEdges
+      : rfEdges.length === 0
+        ? contextConnectors
+        : [...contextConnectors, ...rfEdges]
 
-    const allEdges = [...contextConnectors, ...rfEdges]
     const selectedEdgeEndPoints = new Set<string>()
-    allEdges.forEach((e) => {
+    let hasEdgeSel = false
+    for (const e of allEdges) {
       if (e.selected) {
         selectedEdgeEndPoints.add(e.source)
         selectedEdgeEndPoints.add(e.target)
+        hasEdgeSel = true
       }
-    })
+    }
 
     const neighborNodeIds = new Set<string>()
-    if (selectedNodeIds.size > 0) {
-      allEdges.forEach((e) => {
+    if (hasNodeSel) {
+      for (const e of allEdges) {
         if (selectedNodeIds.has(e.source)) neighborNodeIds.add(e.target)
         if (selectedNodeIds.has(e.target)) neighborNodeIds.add(e.source)
-      })
+      }
     }
 
-    if (selectedNodeIds.size === 0 && selectedEdgeEndPoints.size === 0) return allNodes
+    if (!hasNodeSel && !hasEdgeSel) return allNodes
 
+    const cache = fadedNodeCacheRef.current
     return allNodes.map((n) => {
       const isHighlighted = selectedNodeIds.has(n.id) || selectedEdgeEndPoints.has(n.id) || neighborNodeIds.has(n.id)
       if (isHighlighted) return n
-      return {
+      const cached = cache.get(n)
+      if (cached) return cached
+      const faded: RFNode = {
         ...n,
         style: { ...n.style, opacity: (Number(n.style?.opacity ?? 1)) * 0.2 },
       }
+      cache.set(n, faded)
+      return faded
     })
   }, [liveContextNodes, rfNodes, contextConnectors, rfEdges])
 
   const flowEdges = useMemo(() => {
-    const allEdges = [...contextConnectors, ...rfEdges]
-    const allNodes = [...liveContextNodes, ...rfNodes]
-    const selectedNodeIds = new Set(allNodes.filter((n) => n.selected).map((n) => n.id))
-    const hasEdgeSelection = allEdges.some((e) => e.selected)
+    const allEdges = contextConnectors.length === 0
+      ? rfEdges
+      : rfEdges.length === 0
+        ? contextConnectors
+        : [...contextConnectors, ...rfEdges]
+    const allNodes = liveContextNodes.length === 0
+      ? rfNodes
+      : rfNodes.length === 0
+        ? liveContextNodes
+        : [...liveContextNodes, ...rfNodes]
+
+    const selectedNodeIds = new Set<string>()
+    let hasNodeSel = false
+    for (const n of allNodes) {
+      if (n.selected) { selectedNodeIds.add(n.id); hasNodeSel = true }
+    }
+    let hasEdgeSel = false
+    for (const e of allEdges) { if (e.selected) { hasEdgeSel = true; break } }
 
-    if (selectedNodeIds.size === 0 && !hasEdgeSelection) return allEdges
+    if (!hasNodeSel && !hasEdgeSel) return allEdges
 
+    const cache = fadedEdgeCacheRef.current
     return allEdges.map((e) => {
       const isHighlighted = e.selected || selectedNodeIds.has(e.source) || selectedNodeIds.has(e.target)
       if (isHighlighted) return e
-
+      const cached = cache.get(e)
+      if (cached) return cached
       const multiplier = 0.2
-      return {
+      const faded: RFEdge = {
         ...e,
         style: { ...e.style, opacity: (Number(e.style?.opacity ?? 0.8)) * multiplier },
         labelStyle: e.labelStyle ? { ...e.labelStyle, opacity: (Number(e.labelStyle.opacity ?? 1)) * multiplier } : undefined,
@@ -768,6 +814,8 @@ function ViewEditorInner({
         markerEnd: fadeMarker(e.markerEnd, multiplier),
         markerStart: fadeMarker(e.markerStart, multiplier),
       }
+      cache.set(e, faded)
+      return faded
     })
   }, [contextConnectors, rfEdges, liveContextNodes, rfNodes])
 
@@ -808,7 +856,7 @@ function ViewEditorInner({
   // ── FitView ────────────────────────────────────────────────────────────────
   const fitViewRef = useRef(safeFitView)
   fitViewRef.current = safeFitView
-  const [computedMinZoom, setComputedMinZoom] = useState(0.05)
+  const [computedMinZoom, setComputedMinZoom] = useState(VIEW_EDITOR_MIN_ZOOM_FLOOR)
   const [computedTranslateExtent, setComputedTranslateExtent] = useState<[[number, number], [number, number]] | undefined>(undefined)
   const {
     clampedRevealProgress,
@@ -861,14 +909,22 @@ function ViewEditorInner({
   // ── Dynamic viewport bounds ────────────────────────────────────────────────
   useEffect(() => {
     const vw = window.innerWidth; const vh = window.innerHeight
-    const emptyExtent: [[number, number], [number, number]] = [[-vw, -vh], [vw, vh]]
-    if (flowNodes.length === 0 && drawingPaths.length === 0) {
-      setComputedMinZoom((prev) => prev === 0.05 ? prev : 0.05)
+    const emptyExtent: [[number, number], [number, number]] = [
+      [-vw * VIEW_EDITOR_EMPTY_EXTENT_RATIO, -vh * VIEW_EDITOR_EMPTY_EXTENT_RATIO],
+      [vw * VIEW_EDITOR_EMPTY_EXTENT_RATIO, vh * VIEW_EDITOR_EMPTY_EXTENT_RATIO],
+    ]
+    const boundsNodes = liveContextNodes.length === 0
+      ? rfNodes
+      : rfNodes.length === 0
+        ? liveContextNodes
+        : [...liveContextNodes, ...rfNodes]
+    if (boundsNodes.length === 0 && drawingPaths.length === 0) {
+      setComputedMinZoom((prev) => prev === VIEW_EDITOR_MIN_ZOOM_FLOOR ? prev : VIEW_EDITOR_MIN_ZOOM_FLOOR)
       setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, emptyExtent) ? prev : emptyExtent)
       return
     }
     let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
-    for (const n of flowNodes) {
+    for (const n of boundsNodes) {
       minX = Math.min(minX, n.position.x); minY = Math.min(minY, n.position.y)
       maxX = Math.max(maxX, n.position.x + (n.width ?? 180)); maxY = Math.max(maxY, n.position.y + (n.height ?? 80))
     }
@@ -876,26 +932,26 @@ function ViewEditorInner({
       for (const pt of p.points) { minX = Math.min(minX, pt.x); minY = Math.min(minY, pt.y); maxX = Math.max(maxX, pt.x); maxY = Math.max(maxY, pt.y) }
     }
     if (!isFinite(minX)) {
-      setComputedMinZoom((prev) => prev === 0.05 ? prev : 0.05)
+      setComputedMinZoom((prev) => prev === VIEW_EDITOR_MIN_ZOOM_FLOOR ? prev : VIEW_EDITOR_MIN_ZOOM_FLOOR)
       setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, emptyExtent) ? prev : emptyExtent)
       return
     }
     const bboxW = maxX - minX; const bboxH = maxY - minY
     let minZoom = Math.sqrt((0.12 * vw * vh) / Math.max(1, bboxW * bboxH))
-    if (!isFinite(minZoom) || isNaN(minZoom) || minZoom <= 0) minZoom = 0.05
-    const nextMinZoom = Math.max(0.05, Math.min(minZoom, 1))
+    if (!isFinite(minZoom) || isNaN(minZoom) || minZoom <= 0) minZoom = VIEW_EDITOR_MIN_ZOOM_FLOOR
+    const nextMinZoom = Math.max(VIEW_EDITOR_MIN_ZOOM_FLOOR, Math.min(minZoom, 1))
     setComputedMinZoom((prev) => prev === nextMinZoom ? prev : nextMinZoom)
     // Extent must be ≥ viewport at minZoom (else pan locks). Center on content bbox.
-    // Slack = content-proportional so user can always pan a bit past content edges.
+    // Keep only modest content-proportional slack so the canvas stays discoverable.
     const vwFlowMax = vw / nextMinZoom; const vhFlowMax = vh / nextMinZoom
-    const slackX = Math.max(bboxW * 0.5, 400)
-    const slackY = Math.max(bboxH * 0.5, 400)
-    const spanX = Math.max(bboxW + 2 * slackX, vwFlowMax + 2 * slackX)
-    const spanY = Math.max(bboxH + 2 * slackY, vhFlowMax + 2 * slackY)
+    const slackX = Math.min(Math.max(bboxW * VIEW_EDITOR_PAN_MARGIN_RATIO, VIEW_EDITOR_PAN_MARGIN_MIN), VIEW_EDITOR_PAN_MARGIN_MAX)
+    const slackY = Math.min(Math.max(bboxH * VIEW_EDITOR_PAN_MARGIN_RATIO, VIEW_EDITOR_PAN_MARGIN_MIN), VIEW_EDITOR_PAN_MARGIN_MAX)
+    const spanX = Math.max(bboxW + 2 * slackX, vwFlowMax)
+    const spanY = Math.max(bboxH + 2 * slackY, vhFlowMax)
     const cx = (minX + maxX) / 2; const cy = (minY + maxY) / 2
     const nextTranslateExtent: [[number, number], [number, number]] = [[cx - spanX / 2, cy - spanY / 2], [cx + spanX / 2, cy + spanY / 2]]
     setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, nextTranslateExtent) ? prev : nextTranslateExtent)
-  }, [flowNodes, drawingPaths])
+  }, [rfNodes, liveContextNodes, drawingPaths])
 
   // ── Keyboard shortcuts for drawing ────────────────────────────────────────
   useEffect(() => {
@@ -943,7 +999,27 @@ function ViewEditorInner({
   // ── Share ──────────────────────────────────────────────────────────────────
   const onShare = useCallback(() => {}, [])
 
+  const handleExplorerHoverZoom = useCallback((elementId: number | null, type: 'in' | 'out' | null) => {
+    setHoveredZoom(type && elementId ? { elementId, type } : null)
+  }, [])
+  const handleToggleExplorer = useCallback(() => setIsExplorerOpen((v) => !v), [])
+  const handleCloseLibrary = useCallback(() => setLibraryOpen(false), [])
+  const handleCreateNewLibraryRef = useRef<() => void>(() => {})
+  const handleCreateNewLibrary = useCallback(() => handleCreateNewLibraryRef.current(), [])
+  const handleFocusModeChange = useCallback((v: boolean) => setCrossBranchEnabled(!v), [setCrossBranchEnabled])
+  const handleOpenExport = useCallback(() => exportModal.onOpen(), [exportModal])
+  const handleConnectorSave = useCallback((updated: Connector) => {
+    upsertConnectorGraphSnapshot(updated)
+    setConnectors((prev) => prev.map((c) => (c.id === updated.id ? updated : c)))
+  }, [setConnectors])
+  const handleConnectorDeleteInPanel = useCallback((edgeId: number) => {
+    if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
+    setConnectors((prev) => prev.filter((c) => c.id !== edgeId))
+  }, [setConnectors, viewId])
+  const handleViewSave = useCallback((updated: ViewTreeNode) => setView(updated), [setView])
+
   // ── Library helpers ────────────────────────────────────────────────────────
+  // Assigned below; referenced by memoized callbacks (e.g. ElementLibrary onCreateNew).
   const handleAddElementAtCenter = useCallback((forceCenter = false) => {
     if (!canEdit) return
     const rect = containerRef.current?.getBoundingClientRect()
@@ -957,6 +1033,7 @@ function ViewEditorInner({
     }
     showAddingElementAt(cx, cy, true)
   }, [canEdit, showAddingElementAt, lastMousePosRef])
+  handleCreateNewLibraryRef.current = () => handleAddElementAtCenter(true)
 
   const handleTapAdd = useCallback(async (obj: WorkspaceElement) => {
     if (!canEdit || !viewId || existingElementIds.has(obj.id)) return
@@ -1169,8 +1246,8 @@ function ViewEditorInner({
               treeNodes={treeData}
               linksMap={linksMap} viewElements={viewElements}
               onNavigate={canvas.stableOnNavigateToView}
-              onHoverZoom={(elementId, type) => setHoveredZoom(type && elementId ? { elementId, type } : null)}
-              isOpen={isExplorerOpen} onToggle={() => setIsExplorerOpen((v) => !v)}
+              onHoverZoom={handleExplorerHoverZoom}
+              isOpen={isExplorerOpen} onToggle={handleToggleExplorer}
               isMobile={isMobileLayout}
               activeTags={activeTags}
               setActiveTags={handleSetActiveTags}
@@ -1280,9 +1357,9 @@ function ViewEditorInner({
               hasDrawingPaths={drawingPaths.length > 0} drawingVisible={drawingVisible} setDrawingVisible={setDrawingVisible}
               extrasOpen={extrasOpen} setExtrasOpen={setExtrasOpen}
               focusMode={!crossBranchSettings.enabled}
-              onFocusModeChange={(v) => setCrossBranchEnabled(!v)}
+              onFocusModeChange={handleFocusModeChange}
               disableImportExport={disableImportExport}
-              onImport={importModal.onOpen} onExport={() => exportModal.onOpen()} onShare={onShare}
+              onImport={importModal.onOpen} onExport={handleOpenExport} onShare={onShare}
               allTags={availableTags}
               layers={layers}
               tagColors={tagColors}
@@ -1302,8 +1379,8 @@ function ViewEditorInner({
         <ElementLibrary
           existingElementIds={existingElementIds}
           existingElements={existingElements}
-          onCreateNew={() => handleAddElementAtCenter(true)} refresh={libraryRefresh}
-          isOpen={libraryOpen} onClose={() => setLibraryOpen(false)}
+          onCreateNew={handleCreateNewLibrary} refresh={libraryRefresh}
+          isOpen={libraryOpen} onClose={handleCloseLibrary}
           onTapAdd={canEdit ? handleTapAdd : undefined}
           onFindElement={handleFindElement}
           onTouchDrop={canEdit ? handleTouchDrop : undefined}
@@ -1326,14 +1403,8 @@ function ViewEditorInner({
         <ConnectorPanel
           isOpen={connectorPanel.isOpen} onClose={connectorPanel.onClose} connector={selectedEdge}
           orgId={''}
-          onSave={(updated: Connector) => {
-            upsertConnectorGraphSnapshot(updated)
-            setConnectors((prev) => prev.map((connector) => (connector.id === updated.id ? updated : connector)))
-          }} autoSave
-          onDelete={(edgeId: number) => {
-            if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
-            setConnectors((prev) => prev.filter((connector) => connector.id !== edgeId))
-          }}
+          onSave={handleConnectorSave} autoSave
+          onDelete={handleConnectorDeleteInPanel}
           hasBackdrop={isMobileLayout}
           connectorPanelAfterContentSlot={connectorPanelAfterContentSlot}
         />
@@ -1347,7 +1418,7 @@ function ViewEditorInner({
         <ViewPanel
           isOpen={viewDetails.isOpen} onClose={viewDetails.onClose}
           view={view as ViewTreeNode}
-          onSave={(updated) => setView(updated)} hasBackdrop={isMobileLayout}
+          onSave={handleViewSave} hasBackdrop={isMobileLayout}
         />
 
         <ExportModal