@tldiagram/core-ui 2.0.6 → 2.0.7

package/dist/utils/exploreDiffLens.d.ts

@@ -0,0 +1,47 @@
+import type { WatchDiff } from '../api/client';
+import type { ExploreData } from '../types';
+import { type WatchChangeType } from './watchDiffSummary';
+export interface ExploreDiffLineDelta {
+    added: number;
+    removed: number;
+}
+export interface ExploreDiffDetail {
+    key: string;
+    resourceType: string;
+    resourceId?: number;
+    changeType: WatchChangeType;
+    summary?: string;
+    ownerType: string;
+    ownerKey: string;
+    language?: string;
+    addedLines: number;
+    removedLines: number;
+    sourcePath?: string;
+    line?: number;
+}
+export interface ExploreDiffTarget extends ExploreDiffDetail {
+    label: string;
+    viewId?: number;
+    viewName?: string;
+    unplaced: boolean;
+}
+export interface ExploreDiffLens {
+    versionId: number;
+    elementChanges: Map<number, WatchChangeType>;
+    connectorChanges: Map<number, WatchChangeType>;
+    elementLineDeltas: Map<number, ExploreDiffLineDelta>;
+    diffDetailsByResource: Map<string, ExploreDiffDetail>;
+    orderedTargets: ExploreDiffTarget[];
+    unplacedTargets: ExploreDiffTarget[];
+    changedElementIds: Set<number>;
+    changedConnectorIds: Set<number>;
+    ancestorElementIds: Set<number>;
+    siblingElementIds: Set<number>;
+    contextElementIds: Set<number>;
+    contextConnectorIds: Set<number>;
+    totalAddedLines: number;
+    totalRemovedLines: number;
+}
+export declare function diffResourceKey(resourceType: string | null | undefined, resourceId: number | null | undefined): string;
+export declare function sourcePathFromDiff(diff: Pick<WatchDiff, 'owner_type' | 'owner_key'>): string | undefined;
+export declare function buildExploreDiffLens(data: ExploreData, diffs: WatchDiff[] | null | undefined, versionId: number): ExploreDiffLens;

package/dist/utils/exploreDiffLens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/watchDiffSummary.d.ts

@@ -26,9 +26,13 @@ export interface WatchDiffSummary {
     elements: WatchResourceStat;
     connectors: WatchResourceStat;
 }
+export declare function changedResourceCount(stat: WatchResourceStat): number;
+export declare function totalResourceCount(stat: WatchResourceStat): number;
 export declare function normalizeWatchChangeType(value: string): WatchChangeType;
+export declare function isWatchDiffChange(value: string | null | undefined): boolean;
 export declare function emptyWatchResourceStat(): WatchResourceStat;
 export declare function summarizeWatchDiffs(diffs: WatchDiff[] | null | undefined): WatchDiffSummary;
 export declare function formatStatLine(label: string, stat: WatchResourceStat): string;
+export declare function formatDiagramResourceSummary(summary: WatchDiffSummary): string;
 export declare function formatTldStatLine(summary: WatchDiffSummary): string;
 export declare function buildWatchDiffLocations(data: ExploreData, diffs: WatchDiff[] | null | undefined): WatchDiffLocation[];

package/dist/utils/watchDiffSummary.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

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

package/src/components/WorkspacePanel.tsx

@@ -35,7 +35,10 @@ import {
 import { buildWorkspaceVersionPreview, useWorkspaceVersionPreview } from '../context/WorkspaceVersionContext'
 import {
   buildWatchDiffLocations,
+  formatDiagramResourceSummary,
+  isWatchDiffChange,
   summarizeWatchDiffs,
+  totalResourceCount,
   type WatchDiffLocation,
   type WatchDiffSummary,
 } from '../utils/watchDiffSummary'
@@ -127,9 +130,7 @@ function ResourceCountDisplay({ summary }: { summary: WatchDiffSummary }) {
     { label: 'Elements', stat: summary.elements },
     { label: 'Connectors', stat: summary.connectors },
   ]
-  const total = rows.reduce((sum, row) => (
-    sum + row.stat.added + row.stat.updated + row.stat.deleted + row.stat.initialized
-  ), 0)
+  const total = rows.reduce((sum, row) => sum + totalResourceCount(row.stat), 0)
   const changes = [
     { key: 'added', label: 'added', color: 'green.300' },
     { key: 'updated', label: 'updated', color: 'yellow.300' },
@@ -165,7 +166,7 @@ function ResourceCountDisplay({ summary }: { summary: WatchDiffSummary }) {
                   </Text>
                 ) : null
               })}
-              {row.stat.added + row.stat.updated + row.stat.deleted + row.stat.initialized === 0 && (
+              {totalResourceCount(row.stat) === 0 && (
                 <Text fontSize="11px" color="gray.600" fontFamily="mono">none</Text>
               )}
             </HStack>
@@ -408,10 +409,17 @@ export default function WorkspacePanel() {
   }, [activeDiffLocationIndex, navigableDiffLocations, navigateToDiffLocation])
 
   const activeVersion = preview?.version ?? selectedVersion
+
+  const navigateToDiffMap = useCallback(() => {
+    const targetVersion = activeVersion ?? selectedVersion
+    if (!targetVersion) return
+    navigate(`/views?view=explore&diffVersion=${targetVersion.id}`)
+  }, [activeVersion, navigate, selectedVersion])
+
   const diffSummary = useMemo(() => summarizeWatchDiffs(diffs), [diffs])
-  const totalFileChanges = diffSummary.files.added + diffSummary.files.updated + diffSummary.files.deleted + diffSummary.files.initialized
-  const totalTldChanges = diffSummary.elements.added + diffSummary.elements.updated + diffSummary.elements.deleted + diffSummary.elements.initialized +
-    diffSummary.connectors.added + diffSummary.connectors.updated + diffSummary.connectors.deleted + diffSummary.connectors.initialized
+  const totalFileChanges = totalResourceCount(diffSummary.files)
+  const diagramResourceSummary = formatDiagramResourceSummary(diffSummary)
+  const hasDiffMapTargets = useMemo(() => diffs.some((diff) => isWatchDiffChange(diff.change_type)), [diffs])
   const activeDiffLocation = activeDiffLocationIndex >= 0 ? navigableDiffLocations[activeDiffLocationIndex] : null
   const headerAddedLines = activeDiffLocation?.addedLines ?? diffSummary.elements.addedLines + diffSummary.connectors.addedLines
   const headerRemovedLines = activeDiffLocation?.removedLines ?? diffSummary.elements.removedLines + diffSummary.connectors.removedLines
@@ -716,10 +724,28 @@ export default function WorkspacePanel() {
               <Text fontSize="12px" color="gray.400" fontWeight="500" noOfLines={1} flex={1}>
                 {activeDiffLocation
                   ? `${activeDiffLocationIndex + 1} of ${navigableDiffLocations.length}: ${activeDiffLocation.label}`
-                  : `${totalTldChanges} changed elements`}
+                  : diagramResourceSummary}
               </Text>
             </HStack>
             <HStack spacing={1} flexShrink={0}>
+              <Tooltip label="Open diff map" placement="top">
+                <Button
+                  size="sm"
+                  h="32px"
+                  px={3}
+                  variant="solid"
+                  bg="whiteAlpha.200"
+                  _hover={{ bg: 'whiteAlpha.300' }}
+                  _active={{ bg: 'whiteAlpha.400' }}
+                  leftIcon={<ViewIcon boxSize={3.5} />}
+                  fontSize="12px"
+                  fontWeight="600"
+                  isDisabled={!activeVersion || !hasDiffMapTargets}
+                  onClick={navigateToDiffMap}
+                >
+                  Diff map
+                </Button>
+              </Tooltip>
               <Tooltip label="Previous element" placement="top">
                 <IconButton
                   aria-label="Previous"

package/src/components/ZUI/ZUICanvas.tsx

@@ -26,6 +26,7 @@ import {
 import { Link as RouterLink } from 'react-router-dom'
 import { ExternalLinkIcon } from '@chakra-ui/icons'
 import type { ExploreData } from '../../types'
+import { api } from '../../api/client'
 import { computeLayout } from './layout'
 import { renderFrame, getExpandThresholds, getCameraRebase, rawCameraView, screenToWorldX, screenToWorldY, worldToScreenX, worldToScreenY, setOnImageLoadCallback, setHighlightedTags as setRendererHighlightedTags, setHiddenTags as setRendererHiddenTags, setHighlightColor as setRendererHighlightColor, setVersionDiff as setRendererVersionDiff } from './renderer'
 import { useZUIInteraction } from './useZUIInteraction'
@@ -35,6 +36,9 @@ import { buildWorkspaceGraphSnapshot } from '../../crossBranch/graph'
 import type { CrossBranchContextSettings } from '../../crossBranch/types'
 import { DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA } from '../../crossBranch/settings'
 import type { WorkspaceVersionFollowTarget, WorkspaceVersionPreview } from '../../context/WorkspaceVersionContext'
+import { diffResourceKey, type ExploreDiffDetail, type ExploreDiffLens } from '../../utils/exploreDiffLens'
+import { getSourceEditor } from '../../utils/sourceEditor'
+import { toast } from '../../utils/toast'
 import {
   buildProxyConnectorSpatialIndex,
   buildVisibleProxyConnectors,
@@ -71,6 +75,7 @@ interface Props {
   hiddenTags?: string[]
   versionPreview?: WorkspaceVersionPreview | null
   versionFollowTarget?: WorkspaceVersionFollowTarget | null
+  diffLens?: ExploreDiffLens | null
   crossBranchSettings: CrossBranchContextSettings
   hoverLocked?: boolean
 }
@@ -244,6 +249,60 @@ function fitWorldRect(
   }
 }
 
+function diffColorScheme(change: string | undefined): 'green' | 'red' | 'yellow' | 'blue' {
+  if (change === 'added') return 'green'
+  if (change === 'deleted') return 'red'
+  if (change === 'initialized') return 'blue'
+  return 'yellow'
+}
+
+function DiffDetailBlock({
+  detail,
+  onOpenSource,
+}: {
+  detail: ExploreDiffDetail | null
+  onOpenSource: (detail: ExploreDiffDetail) => void
+}) {
+  if (!detail) return null
+  const hasLines = detail.addedLines > 0 || detail.removedLines > 0
+  return (
+    <VStack align="stretch" spacing={2} mb={3}>
+      <HStack spacing={2} minW={0}>
+        <Badge colorScheme={diffColorScheme(detail.changeType)} variant="subtle" fontSize="2xs">
+          {detail.changeType}
+        </Badge>
+        {hasLines && (
+          <HStack spacing={1.5} fontSize="xs" fontFamily="mono">
+            {detail.addedLines > 0 && <Text color="green.300">+{detail.addedLines}</Text>}
+            {detail.removedLines > 0 && <Text color="red.300">-{detail.removedLines}</Text>}
+          </HStack>
+        )}
+      </HStack>
+      {detail.summary && (
+        <Text fontSize="xs" color="gray.200" noOfLines={3}>{detail.summary}</Text>
+      )}
+      {detail.sourcePath && (
+        <Text fontSize="11px" color="gray.500" fontFamily="mono" noOfLines={2}>{detail.sourcePath}</Text>
+      )}
+      {detail.sourcePath && (
+        <Button
+          size="xs"
+          variant="outline"
+          colorScheme="blue"
+          alignSelf="flex-start"
+          onClick={(event) => {
+            event.stopPropagation()
+            onOpenSource(detail)
+          }}
+        >
+          Open Source
+        </Button>
+      )}
+      <Divider borderColor="whiteAlpha.200" />
+    </VStack>
+  )
+}
+
 function findFirstExpandableNode(groups: DiagramGroupLayout[]): PathItem | null {
   for (const group of groups) {
     const found = findFirstExpandableNodeInTree(group.nodes, 0, 0, 1, 0, 0)
@@ -292,7 +351,7 @@ function findFirstExpandableNodeInTree(
   return null
 }
 
-export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({ data, onReady, onZoom, onPan, initialCameraFrame, highlightedTags, highlightColor, hiddenTags, versionPreview, versionFollowTarget, crossBranchSettings, hoverLocked = false }, ref) {
+export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({ data, onReady, onZoom, onPan, initialCameraFrame, highlightedTags, highlightColor, hiddenTags, versionPreview, versionFollowTarget, diffLens, crossBranchSettings, hoverLocked = false }, ref) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const cameraTransitionRef = useRef<number | null>(null)
@@ -466,6 +525,34 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     )
   }, [hoveredScreenRect, containerSize])
 
+  const hoveredDiffDetail = useMemo(() => {
+    if (!hoveredItem || !diffLens) return null
+    if (hoveredItem.type === 'node') {
+      return diffLens.diffDetailsByResource.get(diffResourceKey('element', hoveredItem.data.elementId)) ?? null
+    }
+    if (hoveredItem.type === 'edge' && !hoveredItem.data.isProxy) {
+      return hoveredItem.data.id
+        ? diffLens.diffDetailsByResource.get(diffResourceKey('connector', hoveredItem.data.id)) ?? null
+        : null
+    }
+    return null
+  }, [diffLens, hoveredItem])
+
+  const handleOpenSource = useCallback((detail: ExploreDiffDetail) => {
+    if (!detail.sourcePath) return
+    api.editor.open({
+      editor: getSourceEditor(),
+      file_path: detail.sourcePath,
+      line: detail.line ?? null,
+    }).catch((error: unknown) => {
+      toast({
+        title: 'Could not open source',
+        description: error instanceof Error ? error.message : 'The source editor command failed.',
+        status: 'error',
+      })
+    })
+  }, [])
+
   // Debounce breadcrumb computation so getPathAt doesn't run on every scroll tick
   const [breadcrumbView, setBreadcrumbView] = useState(viewState)
   const breadcrumbTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -820,6 +907,18 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
   }, [hiddenTags])
 
   useEffect(() => {
+    if (diffLens) {
+      setRendererVersionDiff(
+        diffLens.elementChanges,
+        diffLens.connectorChanges,
+        diffLens.elementLineDeltas,
+        diffLens.contextElementIds,
+        diffLens.contextConnectorIds,
+        true,
+      )
+      needsRedrawRef.current = true
+      return
+    }
     const pulsedElementChanges = new Map<number, string>()
     const pulsedElementLineDeltas = new Map<number, { added: number; removed: number }>()
     if (versionFollowTarget?.resourceType === 'element' && versionFollowTarget.resourceId) {
@@ -832,7 +931,7 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
       versionPreview?.elementLineDeltas ?? pulsedElementLineDeltas,
     )
     needsRedrawRef.current = true
-  }, [versionPreview, versionFollowTarget])
+  }, [diffLens, versionPreview, versionFollowTarget])
 
   useEffect(() => {
     if (!initialized || !versionFollowTarget?.viewId) return
@@ -979,6 +1078,7 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
                 </PopoverHeader>
                 <PopoverBody px={4} py={3}>
                   <VStack align="start" spacing={3}>
+                    <DiffDetailBlock detail={hoveredDiffDetail} onOpenSource={handleOpenSource} />
                     {hoveredItem.data.technology && (
                       <Box>
                         <Text color="gray.400" fontSize="xs" fontWeight="600" mb={0.5} letterSpacing="wider">TECHNOLOGY</Text>
@@ -1033,6 +1133,7 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
                 </PopoverHeader>
                 <PopoverBody px={4} py={3}>
                   <VStack align="start" spacing={3}>
+                    <DiffDetailBlock detail={hoveredDiffDetail} onOpenSource={handleOpenSource} />
                     <VStack align="start" spacing={1}>
                       <Text color="gray.400" fontSize="2xs" fontWeight="600" letterSpacing="wider">BETWEEN</Text>
                       <Text fontSize="xs" color="gray.200">

package/src/components/ZUI/renderer.ts

@@ -139,14 +139,23 @@ export function setHiddenTags(tags: Set<string>): void {
 let currentVersionElementChanges: Map<number, string> = new Map()
 let currentVersionConnectorChanges: Map<number, string> = new Map()
 let currentVersionElementLineDeltas: Map<number, { added: number; removed: number }> = new Map()
+let currentDiffContextElementIds: Set<number> = new Set()
+let currentDiffContextConnectorIds: Set<number> = new Set()
+let currentDiffLensActive = false
 export function setVersionDiff(
   elementChanges: Map<number, string>,
   connectorChanges: Map<number, string>,
   elementLineDeltas: Map<number, { added: number; removed: number }> = new Map(),
+  contextElementIds: Set<number> = new Set(),
+  contextConnectorIds: Set<number> = new Set(),
+  diffLensActive = false,
 ): void {
   currentVersionElementChanges = elementChanges
   currentVersionConnectorChanges = connectorChanges
   currentVersionElementLineDeltas = elementLineDeltas
+  currentDiffContextElementIds = contextElementIds
+  currentDiffContextConnectorIds = contextConnectorIds
+  currentDiffLensActive = diffLensActive
 }
 
 /**
@@ -1078,10 +1087,20 @@ function drawNode(
     const change = currentVersionElementChanges.get(node.elementId)
     if (!change) {
       ctx.save()
-      ctx.globalAlpha = parentAlpha * 0.9
+      const isContext = currentDiffLensActive && currentDiffContextElementIds.has(node.elementId)
+      ctx.globalAlpha = parentAlpha * (isContext ? 0.45 : 0.9)
       ctx.fillStyle = canvasBg
       traceShape()
       ctx.fill()
+      if (isContext && drawScreenW > 40) {
+        ctx.globalAlpha = parentAlpha * 0.55
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.18)'
+        ctx.lineWidth = 1.5 / drawZoom
+        ctx.setLineDash([4 / drawZoom, 4 / drawZoom])
+        traceShape()
+        ctx.stroke()
+        ctx.setLineDash([])
+      }
       ctx.restore()
     } else {
       const color = change === 'added' ? '#68d391' : change === 'deleted' ? '#fc8181' : '#f6e05e'
@@ -1286,9 +1305,26 @@ function drawEdges(
       ctx.save()
       const edgeChange = currentVersionConnectorChanges.get(edge.id)
       const versionPreviewActive = currentVersionElementChanges.size > 0 || currentVersionConnectorChanges.size > 0
-      ctx.globalAlpha = versionPreviewActive && !edgeChange ? Math.max(alpha * 0.18, 0.08) : connectorAlpha(alpha)
-      ctx.strokeStyle = accent
-      ctx.lineWidth = CONNECTOR_LINE_PX / zoom
+      const edgeContext = currentDiffLensActive && (
+        currentDiffContextConnectorIds.has(edge.id) ||
+        currentDiffContextElementIds.has(node.elementId) ||
+        currentDiffContextElementIds.has(target.elementId) ||
+        currentVersionElementChanges.has(node.elementId) ||
+        currentVersionElementChanges.has(target.elementId)
+      )
+      ctx.globalAlpha = versionPreviewActive && !edgeChange
+        ? edgeContext
+          ? Math.max(alpha * 0.28, 0.12)
+          : Math.max(alpha * 0.08, 0.04)
+        : connectorAlpha(alpha)
+      ctx.strokeStyle = edgeChange === 'added'
+        ? '#68d391'
+        : edgeChange === 'deleted'
+          ? '#fc8181'
+          : edgeChange
+            ? '#f6e05e'
+            : accent
+      ctx.lineWidth = (edgeChange ? CONNECTOR_LINE_PX * 1.35 : CONNECTOR_LINE_PX) / zoom
 
       let midX = (sH.x + tH.x) / 2
       let midY = (sH.y + tH.y) / 2

package/src/components/ZUI/types.ts

@@ -139,6 +139,7 @@ export type HoveredItem =
   | {
     type: 'edge';
     data: {
+      id?: number;
       sourceId: string;
       targetId: string;
       label: string;

package/src/components/ZUI/useZUIInteraction.ts

@@ -205,6 +205,7 @@ type IndexedEdge =
     sourceLabel: string
     targetLabel: string
     label: string
+    id: number
     diagramId: number
     sourceObjId: number
     targetObjId: number
@@ -410,6 +411,7 @@ function buildEdgeSpatialIndex(groups: DiagramGroupLayout[]): EdgeSpatialIndex {
         sourceLabel: source.label,
         targetLabel: target.label,
         label: edge.label || 'Connection',
+        id: edge.id,
         diagramId: group.diagramId,
         sourceObjId: source.elementId,
         targetObjId: target.elementId,
@@ -495,6 +497,7 @@ function findHoveredEdge(
       sourceId: bestEdge.sourceLabel,
       targetId: bestEdge.targetLabel,
       label: bestEdge.label,
+      id: bestEdge.id,
       diagramId: bestEdge.diagramId,
       sourceObjId: bestEdge.sourceObjId,
       targetObjId: bestEdge.targetObjId

package/src/context/WorkspaceVersionContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import type { WatchDiff, WatchRepository, WatchVersion, WorkspaceVersion } from '../api/client'
-import { normalizeWatchChangeType } from '../utils/watchDiffSummary'
+import { isWatchDiffChange, normalizeWatchChangeType } from '../utils/watchDiffSummary'
 
 export type VersionChangeType = 'added' | 'updated' | 'deleted' | 'initialized'
 
@@ -62,16 +62,16 @@ export function buildWorkspaceVersionPreview(args: {
     const change = normalizeWatchChangeType(diff.change_type)
     summary[change] += 1
     if (diff.resource_type === 'element' && diff.resource_id) {
-      elementChanges.set(diff.resource_id, change)
+      if (isWatchDiffChange(diff.change_type)) elementChanges.set(diff.resource_id, change)
       const added = Math.max(0, diff.added_lines ?? 0)
       const removed = Math.max(0, diff.removed_lines ?? 0)
-      if (added > 0 || removed > 0) {
+      if (isWatchDiffChange(diff.change_type) && (added > 0 || removed > 0)) {
         elementLineDeltas.set(diff.resource_id, { added, removed })
       }
       summary.elements += 1
     }
     if (diff.resource_type === 'connector' && diff.resource_id) {
-      connectorChanges.set(diff.resource_id, change)
+      if (isWatchDiffChange(diff.change_type)) connectorChanges.set(diff.resource_id, change)
       summary.connectors += 1
     }
   })