@tldiagram/core-ui 1.95.0 → 2.0.0

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { type Edge as RFEdge, type Node as RFNode } from 'reactflow'
-import type { PlacedElement } from '../../../types'
+import type { Connector, PlacedElement } from '../../../types'
 import type { CrossBranchContextSettings, ProxyConnectorDetails, WorkspaceGraphSnapshot } from '../../../crossBranch/types'
 import { resolveViewProxyGraph } from '../../../crossBranch/resolve'
 
@@ -69,6 +69,61 @@ function isAncestorContextNode(
     (snapshot.descendantsByViewId[ownedViewId]?.includes(descendant.placementViewId) ?? false)
 }
 
+function canonicalElementPairKey(leftId: number, rightId: number) {
+  return leftId <= rightId ? `${leftId}::${rightId}` : `${rightId}::${leftId}`
+}
+
+function canonicalNodePairKey(leftId: string, rightId: string) {
+  return leftId <= rightId ? `${leftId}::${rightId}` : `${rightId}::${leftId}`
+}
+
+function buildDirectConnectorPairSet(connectors: Connector[], visibleElementIds: Set<number>) {
+  const pairs = new Set<string>()
+  for (const connector of connectors) {
+    if (!visibleElementIds.has(connector.source_element_id) || !visibleElementIds.has(connector.target_element_id)) continue
+    pairs.add(canonicalElementPairKey(connector.source_element_id, connector.target_element_id))
+  }
+  return pairs
+}
+
+function mergeHiddenProxyDetails(
+  existing: ProxyConnectorDetails | undefined,
+  next: ProxyConnectorDetails,
+): ProxyConnectorDetails {
+  if (!existing) {
+    return {
+      ...next,
+      ownerViewIds: [...next.ownerViewIds],
+      ownerViewNames: [...next.ownerViewNames],
+      connectors: [...next.connectors],
+    }
+  }
+
+  const ownerViews = new Map<number, string>()
+  existing.ownerViewIds.forEach((ownerViewId, index) => {
+    ownerViews.set(ownerViewId, existing.ownerViewNames[index] ?? `View ${ownerViewId}`)
+  })
+  next.ownerViewIds.forEach((ownerViewId, index) => {
+    ownerViews.set(ownerViewId, next.ownerViewNames[index] ?? `View ${ownerViewId}`)
+  })
+
+  const connectors = [...existing.connectors, ...next.connectors]
+  const count = connectors.length
+
+  return {
+    key: existing.key,
+    label: count === 1 ? connectors[0]?.connector.label?.trim() || connectors[0]?.connector.relationship?.trim() || 'Cross-branch' : `${count} connectors`,
+    count,
+    sourceAnchorId: existing.sourceAnchorId,
+    targetAnchorId: existing.targetAnchorId,
+    sourceAnchorName: existing.sourceAnchorName,
+    targetAnchorName: existing.targetAnchorName,
+    ownerViewIds: Array.from(ownerViews.keys()),
+    ownerViewNames: Array.from(ownerViews.values()),
+    connectors,
+  }
+}
+
 export function useViewContextNeighbours({
   snapshot,
   settings,
@@ -82,18 +137,38 @@ export function useViewContextNeighbours({
 }: Props) {
   return useMemo(() => {
     if (!snapshot || viewId == null || !settings.enabled) {
-      return { contextNodes: [] as RFNode[], contextConnectors: [] as RFEdge[], proxyConnectorDetailsByKey: {} as Record<string, ProxyConnectorDetails> }
+      return {
+        contextNodes: [] as RFNode[],
+        contextConnectors: [] as RFEdge[],
+        proxyConnectorDetailsByKey: {} as Record<string, ProxyConnectorDetails>,
+        hiddenProxyCountsByPair: {} as Record<string, number>,
+        hiddenProxyDetailsByPair: {} as Record<string, ProxyConnectorDetails>,
+      }
     }
 
     const { proxyNodes, proxyConnectors, proxyConnectorDetailsByKey } = resolveViewProxyGraph(snapshot, viewId, viewElements, settings)
     if (proxyNodes.length === 0 && proxyConnectors.length === 0) {
-      return { contextNodes: [] as RFNode[], contextConnectors: [] as RFEdge[], proxyConnectorDetailsByKey }
+      return {
+        contextNodes: [] as RFNode[],
+        contextConnectors: [] as RFEdge[],
+        proxyConnectorDetailsByKey,
+        hiddenProxyCountsByPair: {} as Record<string, number>,
+        hiddenProxyDetailsByPair: {} as Record<string, ProxyConnectorDetails>,
+      }
     }
 
     const mainNodes = rfNodes.filter((node) => node.type === 'elementNode')
     if (mainNodes.length === 0) {
-      return { contextNodes: [] as RFNode[], contextConnectors: [] as RFEdge[], proxyConnectorDetailsByKey }
+      return {
+        contextNodes: [] as RFNode[],
+        contextConnectors: [] as RFEdge[],
+        proxyConnectorDetailsByKey,
+        hiddenProxyCountsByPair: {} as Record<string, number>,
+        hiddenProxyDetailsByPair: {} as Record<string, ProxyConnectorDetails>,
+      }
     }
+    const visibleElementIds = new Set(viewElements.map((element) => element.element_id))
+    const directConnectorPairs = buildDirectConnectorPairSet(snapshot.connectorsByViewId[viewId] ?? [], visibleElementIds)
 
     let minX = Infinity
     let minY = Infinity
@@ -460,6 +535,8 @@ export function useViewContextNeighbours({
       })
 
     const seenCollapsedPairs = new Set<string>()
+    const hiddenProxyCountsByPair: Record<string, number> = {}
+    const hiddenProxyDetailsByPair: Record<string, ProxyConnectorDetails> = {}
     const contextConnectors: RFEdge[] = proxyConnectors.flatMap((connector) => {
       let sourceId = connector.sourceAnchorId
       let targetId = connector.targetAnchorId
@@ -472,7 +549,20 @@ export function useViewContextNeighbours({
 
       if (sourceId === targetId) return []
 
-      const pairKey = `${sourceId}::${targetId}`
+      const pairKey = canonicalNodePairKey(sourceId, targetId)
+      if (directConnectorPairs.has(pairKey)) {
+        hiddenProxyCountsByPair[pairKey] = (hiddenProxyCountsByPair[pairKey] ?? 0) + connector.details.count
+        hiddenProxyDetailsByPair[pairKey] = mergeHiddenProxyDetails(
+          hiddenProxyDetailsByPair[pairKey],
+          {
+            ...connector.details,
+            key: `hidden:${pairKey}`,
+            sourceAnchorId: sourceId,
+            targetAnchorId: targetId,
+          },
+        )
+        return []
+      }
       if (seenCollapsedPairs.has(pairKey)) return []
       seenCollapsedPairs.add(pairKey)
 
@@ -496,6 +586,12 @@ export function useViewContextNeighbours({
       }]
     })
 
-    return { contextNodes: [ContextBoundaryElement, ...contextNodes], contextConnectors, proxyConnectorDetailsByKey }
+    return {
+      contextNodes: [ContextBoundaryElement, ...contextNodes],
+      contextConnectors,
+      proxyConnectorDetailsByKey,
+      hiddenProxyCountsByPair,
+      hiddenProxyDetailsByPair,
+    }
   }, [snapshot, settings, viewId, viewElements, rfNodes, stableOnNavigateToView, onSelectProxyDetails, expandedAncestorGroups, onToggleAncestorGroup])
 }

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

@@ -18,6 +18,7 @@ import {
   getVisualHandleSlot,
 } from '../../../utils/edgeDistribution'
 import { buildViewContentLinks, useStore } from '../../../store/useStore'
+import type { WorkspaceVersionFollowTarget, WorkspaceVersionPreview } from '../../../context/WorkspaceVersionContext'
 
 interface ViewDataOptions {
   viewId: number | null
@@ -29,6 +30,8 @@ interface ViewDataOptions {
   hoveredLayerTags: string[] | null
   hoveredLayerColor: string | null
   tagColors: Record<string, Tag>
+  versionPreview?: WorkspaceVersionPreview | null
+  versionFollowTarget?: WorkspaceVersionFollowTarget | null
   // Node-level callbacks (stable refs from parent)
   stableOnZoomIn: (elementId: number) => Promise<void>
   stableOnZoomOut: (elementId: number) => Promise<void>
@@ -52,6 +55,7 @@ function alphaColor(color: string, opacity: number): string {
 // letting structural-sharing fast-path bail out without rebuilding the node.
 const HIDDEN_STYLE: CSSProperties = { opacity: 0.1, pointerEvents: 'none' }
 const SOFT_FOCUS_STYLE: CSSProperties = { opacity: 0.2 }
+const VERSION_DIM_STYLE: CSSProperties = { opacity: 0.1 }
 const EMPTY_ARRAY: readonly never[] = Object.freeze([])
 const EMPTY_NODE_CONNECTION_META = Object.freeze({
   key: '',
@@ -158,6 +162,8 @@ export function useViewData({
   hoveredLayerTags,
   hoveredLayerColor,
   tagColors,
+  versionPreview,
+  versionFollowTarget,
   stableOnZoomIn,
   stableOnZoomOut,
   stableOnNavigateToView,
@@ -189,7 +195,6 @@ export function useViewData({
   const incomingLinks = useStore((state) => state.incomingLinks)
   const treeData = useStore((state) => state.treeData)
   const allElements = useStore((state) => state.allElements)
-  const setAllElements = useStore((state) => state.setAllElements)
   const hydrateViewContent = useStore((state) => state.hydrateViewContent)
   const resetCanvas = useStore((state) => state.resetCanvas)
   const removeElementPlacement = useStore((state) => state.removeElementPlacement)
@@ -216,13 +221,14 @@ export function useViewData({
 
   // ── Fetch tree ─────────────────────────────────────────────────────────────
   const refreshGrid = useCallback(async () => {
+    if (viewId === null) return
     const tree = await queryClient.fetchQuery({
-      queryKey: ['workspace', 'views', 'tree'],
-      queryFn: () => api.workspace.views.tree(),
+      queryKey: ['workspace', 'views', viewId, 'editor-tree'],
+      queryFn: () => api.workspace.views.treeAround(viewId, { ancestorLevels: 2, descendantLevels: 2 }),
       staleTime: 0,
     }).catch(() => null)
     if (tree) useStore.getState().setTreeData(tree)
-  }, [queryClient])
+  }, [queryClient, viewId])
 
   // ── Fetch view content ──────────────────────────────────────────────────
   const viewContentQuery = useQuery({
@@ -233,7 +239,7 @@ export function useViewData({
       const [diag, content, tree] = await Promise.all([
         api.workspace.views.get(viewId),
         api.workspace.views.content(viewId),
-        api.workspace.views.tree(),
+        api.workspace.views.treeAround(viewId, { ancestorLevels: 2, descendantLevels: 2 }),
       ])
       const viewElements = content.placements || []
       const connectors = content.connectors || []
@@ -264,16 +270,6 @@ export function useViewData({
     resetCanvas()
   }, [resetCanvas, viewId])
 
-  // ── Keep all-org elements for inline adder ──────────────────────────────────
-  const allElementsQuery = useQuery({
-    queryKey: ['elements', 'list'],
-    queryFn: () => api.elements.list(),
-  })
-
-  useEffect(() => {
-    if (allElementsQuery.data) setAllElements(allElementsQuery.data)
-  }, [allElementsQuery.data, setAllElements])
-
   // ── Refresh elements ────────────────────────────────────────────────────────
   const refreshElements = useCallback(async () => {
     if (viewId === null) return
@@ -428,6 +424,9 @@ export function useViewData({
       const activeSet = activeTags.length > 0 ? new Set(activeTags) : null
       const hoveredSet = hoveredLayerTags !== null ? new Set(hoveredLayerTags) : null
       const isClickConnectMode = clickConnectMode !== null
+      const versionElementChanges = versionPreview?.elementChanges
+      const versionElementLineDeltas = versionPreview?.elementLineDeltas
+      const versionActive = !!versionPreview
 
       return viewElements.map((obj) => {
         const nodeId = String(obj.element_id)
@@ -438,13 +437,21 @@ export function useViewData({
         const isInactive = isHiddenByLayer || (activeSet !== null && !objTags.some((t) => activeSet.has(t)))
         const isLayerHighlighted = hoveredSet !== null && objTags.some((t) => hoveredSet.has(t))
         const isSoftFocused = hoveredSet !== null && !isLayerHighlighted
-
-        const newZIndex = isLayerHighlighted ? 10 : interactionSourceId === obj.element_id ? 1000 : 0
+        const versionChangeType = versionElementChanges?.get(obj.element_id)
+        const versionLineDelta = versionElementLineDeltas?.get(obj.element_id)
+        const versionPulseChangeType = versionFollowTarget?.resourceType === 'element' && versionFollowTarget.resourceId === obj.element_id
+          ? versionFollowTarget.changeType ?? versionChangeType
+          : undefined
+        const isDimmedByVersionPreview = versionActive && !versionChangeType
+
+        const newZIndex = versionPulseChangeType ? 20 : isLayerHighlighted ? 10 : interactionSourceId === obj.element_id ? 1000 : 0
         const newStyle = isInactive
           ? HIDDEN_STYLE
           : isSoftFocused
             ? SOFT_FOCUS_STYLE
-            : undefined
+            : isDimmedByVersionPreview
+              ? VERSION_DIM_STYLE
+              : undefined
         const layerHighlightColor = isLayerHighlighted ? (hoveredLayerColor ?? undefined) : undefined
         const position = existing?.dragging ? existing.position : { x: obj.position_x ?? 0, y: obj.position_y ?? 0 }
         const isZoomHovered = hoveredZoomRef.current?.elementId === obj.element_id ? hoveredZoomRef.current.type : null
@@ -487,7 +494,9 @@ export function useViewData({
           existing.data.connectedHandleIds === connectionMeta.connectedHandleIds &&
           existing.data.selectedHandleIds === connectionMeta.selectedHandleIds &&
           existing.data.reconnectCandidates === connectionMeta.reconnectCandidates &&
-          existing.data.isConnectorHighlighted === connectionMeta.isConnectorHighlighted
+          existing.data.isConnectorHighlighted === connectionMeta.isConnectorHighlighted &&
+          existing.data.versionChangeType === versionPulseChangeType &&
+          existing.data.versionLineDelta === versionLineDelta
         ) {
           return existing
         }
@@ -527,6 +536,8 @@ export function useViewData({
             selectedHandleIds: connectionMeta.selectedHandleIds,
             reconnectCandidates: connectionMeta.reconnectCandidates,
             isConnectorHighlighted: connectionMeta.isConnectorHighlighted,
+            versionChangeType: versionPulseChangeType,
+            versionLineDelta,
           },
         }
       })
@@ -537,7 +548,7 @@ export function useViewData({
     stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect,
     stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom,
     stableOnOpenCodePreview, hoveredZoomRef, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors,
-    nodeConnectionMetaByElementId, setRfNodes,
+    nodeConnectionMetaByElementId, setRfNodes, versionPreview, versionFollowTarget,
   ])
 
   // ── Derive RF connectors ────────────────────────────────────────────────────────
@@ -545,6 +556,8 @@ export function useViewData({
     const hiddenSet = hiddenLayerTags.length > 0 ? new Set(hiddenLayerTags) : null
     const activeSet = activeTags.length > 0 ? new Set(activeTags) : null
     const hoveredSet = hoveredLayerTags !== null ? new Set(hoveredLayerTags) : null
+    const versionConnectorChanges = versionPreview?.connectorChanges
+    const versionActive = !!versionPreview
 
     setRfEdges((prevConnectors) => {
       const prevEdgeMap = new Map(prevConnectors.map((e) => [e.id, e]))
@@ -572,11 +585,13 @@ export function useViewData({
           !srcTags.some((t) => hoveredSet.has(t)) ||
           !tgtTags.some((t) => hoveredSet.has(t))
         )
-        const edgeOpacity = isInactive ? 0.1 : isSoftFocused ? 0.2 : 0.8
-        const markerOpacity = isInactive ? 0.1 : isSoftFocused ? 0.2 : 1
+        const versionChangeType = versionConnectorChanges?.get(e.id)
+        const isDimmedByVersionPreview = versionActive && !versionChangeType
+        const edgeOpacity = isInactive || isDimmedByVersionPreview ? 0.1 : isSoftFocused ? 0.2 : 0.8
+        const markerOpacity = isInactive || isDimmedByVersionPreview ? 0.1 : isSoftFocused ? 0.2 : 1
         const newZIndex = selectedEdgeId !== null && edgeId === String(selectedEdgeId) ? 1000 : 100
         const pointerEvents = (isInactive || isSoftFocused) ? 'none' : 'auto'
-        const labelBgOpacity = isInactive ? 0.1 : isSoftFocused ? 0.2 : 0.95
+        const labelBgOpacity = isInactive || isDimmedByVersionPreview ? 0.1 : isSoftFocused ? 0.2 : 0.95
 
         // Structural sharing: when all user-visible outputs match prev exactly, reuse prev ref.
         // We match on the underlying connector ref plus every computed visibility/layout value.
@@ -594,7 +609,8 @@ export function useViewData({
           (existing.data as { sourceGroupIndex?: number }).sourceGroupIndex === layout.sourceGroupIndex &&
           (existing.data as { targetGroupIndex?: number }).targetGroupIndex === layout.targetGroupIndex &&
           (existing.data as { sourceGroupCount?: number }).sourceGroupCount === layout.sourceGroupCount &&
-          (existing.data as { targetGroupCount?: number }).targetGroupCount === layout.targetGroupCount
+          (existing.data as { targetGroupCount?: number }).targetGroupCount === layout.targetGroupCount &&
+          (existing.data as { versionChangeType?: string }).versionChangeType === versionChangeType
         ) {
           return existing
         }
@@ -620,6 +636,7 @@ export function useViewData({
             targetHandleSide: layout.targetHandleSide,
             sourceHandleSlot: layout.sourceHandleSlot,
             targetHandleSlot: layout.targetHandleSlot,
+            versionChangeType,
           },
 
           style: { stroke: 'var(--accent)', strokeWidth: 2, opacity: edgeOpacity, pointerEvents },
@@ -632,7 +649,7 @@ export function useViewData({
         }
       })
     })
-  }, [connectorLayouts, selectedEdgeId, activeTags, hiddenLayerTags, hoveredLayerTags, elementMap, setRfEdges])
+  }, [connectorLayouts, selectedEdgeId, activeTags, hiddenLayerTags, hoveredLayerTags, elementMap, setRfEdges, versionPreview])
 
 
   // ── Boost z-index of selected connector ────────────────────────────────────────
@@ -685,6 +702,5 @@ export function useViewData({
     handleElementDeleted,
     handleElementPermanentlyDeleted,
     handleElementSaved,
-    setAllElements,
   }
 }

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

@@ -0,0 +1,62 @@
+import { useCallback, useState } from 'react'
+
+const MAX_HISTORY_ITEMS = 20
+
+export interface ViewEditHistoryAction {
+  undo: () => Promise<void>
+  redo: () => Promise<void>
+}
+
+export function useViewEditHistory() {
+  const [undoStack, setUndoStack] = useState<ViewEditHistoryAction[]>([])
+  const [redoStack, setRedoStack] = useState<ViewEditHistoryAction[]>([])
+  const [isApplyingHistory, setIsApplyingHistory] = useState(false)
+
+  const pushAction = useCallback((action: ViewEditHistoryAction) => {
+    setUndoStack((stack) => [...stack, action].slice(-MAX_HISTORY_ITEMS))
+    setRedoStack([])
+  }, [])
+
+  const clearHistory = useCallback(() => {
+    setUndoStack([])
+    setRedoStack([])
+  }, [])
+
+  const undo = useCallback(async () => {
+    if (isApplyingHistory) return
+    const action = undoStack[undoStack.length - 1]
+    if (!action) return
+    setIsApplyingHistory(true)
+    try {
+      await action.undo()
+      setUndoStack((stack) => stack.slice(0, -1))
+      setRedoStack((stack) => [...stack, action].slice(-MAX_HISTORY_ITEMS))
+    } finally {
+      setIsApplyingHistory(false)
+    }
+  }, [isApplyingHistory, undoStack])
+
+  const redo = useCallback(async () => {
+    if (isApplyingHistory) return
+    const action = redoStack[redoStack.length - 1]
+    if (!action) return
+    setIsApplyingHistory(true)
+    try {
+      await action.redo()
+      setRedoStack((stack) => stack.slice(0, -1))
+      setUndoStack((stack) => [...stack, action].slice(-MAX_HISTORY_ITEMS))
+    } finally {
+      setIsApplyingHistory(false)
+    }
+  }, [isApplyingHistory, redoStack])
+
+  return {
+    canUndo: undoStack.length > 0,
+    canRedo: redoStack.length > 0,
+    isApplyingHistory,
+    pushAction,
+    clearHistory,
+    undo,
+    redo,
+  }
+}