@tldiagram/core-ui 1.95.1 → 2.0.0

package/src/pages/viewsJumpSearch.test.ts

@@ -0,0 +1,193 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildJumpSearchResults,
+  flattenTree,
+  jumpResultActionLabel,
+  jumpResultSubtitle,
+} from './viewsJumpSearch'
+import type { ExploreData, PlacedElement, ViewTreeNode } from '../types'
+
+function viewNode(id: number, name: string, children: ViewTreeNode[] = [], level = 1): ViewTreeNode {
+  return {
+    id,
+    owner_element_id: null,
+    name,
+    description: null,
+    level_label: level === 1 ? 'System' : null,
+    level,
+    depth: level - 1,
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+    parent_view_id: null,
+    children,
+  }
+}
+
+function placed(viewId: number, elementId: number, name: string, overrides: Partial<PlacedElement> = {}): PlacedElement {
+  return {
+    id: viewId * 1000 + elementId,
+    view_id: viewId,
+    element_id: elementId,
+    position_x: 0,
+    position_y: 0,
+    name,
+    description: null,
+    kind: 'service',
+    technology: null,
+    url: null,
+    logo_url: null,
+    technology_connectors: [],
+    tags: [],
+    has_view: false,
+    view_label: null,
+    ...overrides,
+  }
+}
+
+function exploreData(tree: ViewTreeNode[], placementsByView: Record<string, PlacedElement[]>): ExploreData {
+  return {
+    tree,
+    navigations: [],
+    views: Object.fromEntries(
+      Object.entries(placementsByView).map(([viewId, placements]) => [
+        viewId,
+        { placements, connectors: [] },
+      ]),
+    ),
+  }
+}
+
+describe('views jump search', () => {
+  const tree = [
+    viewNode(1, 'Workspace', [
+      viewNode(2, 'Payments', [], 2),
+      viewNode(3, 'Platform Payments', [], 2),
+      viewNode(4, 'Identity', [], 2),
+    ]),
+  ]
+  const flatTree = flattenTree(tree)
+
+  it('flattens the view tree in navigation order', () => {
+    expect(flatTree.map((node) => node.name)).toEqual([
+      'Workspace',
+      'Payments',
+      'Platform Payments',
+      'Identity',
+    ])
+  })
+
+  it('returns view results without requiring workspace placement data', () => {
+    const results = buildJumpSearchResults('payments', flatTree, null)
+
+    expect(results).toEqual([
+      {
+        type: 'view',
+        key: 'view:2',
+        name: 'Payments',
+        viewId: 2,
+        level: 2,
+        levelLabel: null,
+      },
+      {
+        type: 'view',
+        key: 'view:3',
+        name: 'Platform Payments',
+        viewId: 3,
+        level: 2,
+        levelLabel: null,
+      },
+    ])
+  })
+
+  it('builds element navigation results from names and metadata fields', () => {
+    const data = exploreData(tree, {
+      2: [
+        placed(2, 201, 'Checkout API', {
+          kind: 'api',
+          technology: 'Node',
+          file_path: 'services/checkout/index.ts',
+          tags: ['critical-path'],
+        }),
+      ],
+      4: [
+        placed(4, 401, 'Session Store', {
+          kind: 'database',
+          technology: 'Redis',
+          tags: ['auth'],
+        }),
+      ],
+    })
+
+    const byName = buildJumpSearchResults('checkout', flatTree, data)
+    expect(byName).toContainEqual({
+      type: 'element',
+      key: 'element:2:201',
+      name: 'Checkout API',
+      viewId: 2,
+      viewName: 'Payments',
+      elementId: 201,
+      kind: 'api',
+    })
+
+    const byTag = buildJumpSearchResults('critical', flatTree, data)
+    expect(byTag.map((result) => result.key)).toEqual(['element:2:201'])
+
+    const byTechnology = buildJumpSearchResults('redis', flatTree, data)
+    expect(byTechnology.map((result) => result.key)).toEqual(['element:4:401'])
+
+    const byPath = buildJumpSearchResults('services/checkout', flatTree, data)
+    expect(byPath.map((result) => result.key)).toEqual(['element:2:201'])
+  })
+
+  it('keeps same-element placements in different views as distinct navigation targets', () => {
+    const data = exploreData(tree, {
+      2: [placed(2, 501, 'Shared Logger')],
+      3: [placed(3, 501, 'Shared Logger')],
+    })
+
+    const results = buildJumpSearchResults('shared logger', flatTree, data)
+
+    expect(results).toEqual([
+      expect.objectContaining({ type: 'element', key: 'element:2:501', viewId: 2, elementId: 501 }),
+      expect.objectContaining({ type: 'element', key: 'element:3:501', viewId: 3, elementId: 501 }),
+    ])
+  })
+
+  it('caps result groups while preserving view-first ordering', () => {
+    const manyViews = [
+      viewNode(10, 'Alpha Root', [
+        viewNode(11, 'Alpha Billing', [], 2),
+        viewNode(12, 'Alpha Catalog', [], 2),
+        viewNode(13, 'Alpha Checkout', [], 2),
+        viewNode(14, 'Alpha Delivery', [], 2),
+        viewNode(15, 'Alpha Events', [], 2),
+      ]),
+    ]
+    const manyFlatTree = flattenTree(manyViews)
+    const data = exploreData(manyViews, {
+      11: Array.from({ length: 8 }, (_, index) => placed(11, 700 + index, `Alpha Element ${index}`)),
+    })
+
+    const results = buildJumpSearchResults('alpha', manyFlatTree, data)
+
+    expect(results).toHaveLength(8)
+    expect(results.filter((result) => result.type === 'view')).toHaveLength(4)
+    expect(results.filter((result) => result.type === 'element')).toHaveLength(4)
+    expect(results.slice(0, 4).every((result) => result.type === 'view')).toBe(true)
+  })
+
+  it('formats result hints used by the toolbar', () => {
+    expect(buildJumpSearchResults('id', flatTree, null)).toEqual([])
+    expect(jumpResultActionLabel('explore')).toBe('ZOOM')
+    expect(jumpResultActionLabel('hierarchy')).toBe('OPEN')
+
+    const [viewResult] = buildJumpSearchResults('payments', flatTree, null)
+    expect(jumpResultSubtitle(viewResult)).toBe('Level 2 • Diagram')
+
+    const data = exploreData(tree, {
+      4: [placed(4, 401, 'Session Store', { kind: null })],
+    })
+    const [elementResult] = buildJumpSearchResults('session', flatTree, data)
+    expect(jumpResultSubtitle(elementResult)).toBe('Element • Identity')
+  })
+})

package/src/pages/viewsJumpSearch.ts

@@ -0,0 +1,111 @@
+import type { ExploreData, PlacedElement, ViewTreeNode } from '../types'
+
+export type JumpViewMode = 'explore' | 'hierarchy'
+
+export type JumpSearchResult =
+  | {
+    type: 'view'
+    key: string
+    name: string
+    viewId: number
+    level: number
+    levelLabel: string | null
+  }
+  | {
+    type: 'element'
+    key: string
+    name: string
+    viewId: number
+    viewName: string
+    elementId: number
+    kind: string | null
+  }
+
+export function flattenTree(roots: ViewTreeNode[]): ViewTreeNode[] {
+  const result: ViewTreeNode[] = []
+  const traverse = (node: ViewTreeNode) => {
+    result.push(node)
+    node.children.forEach(traverse)
+  }
+  roots.forEach(traverse)
+  return result
+}
+
+export function jumpResultSubtitle(result: JumpSearchResult): string {
+  if (result.type === 'view') {
+    return `Level ${result.level} • ${result.levelLabel || 'Diagram'}`
+  }
+  return `${result.kind || 'Element'} • ${result.viewName}`
+}
+
+export function jumpResultActionLabel(view: JumpViewMode): string {
+  if (view === 'explore') return 'ZOOM'
+  return 'OPEN'
+}
+
+function searchScore(value: string, normalizedTerm: string): number {
+  const normalizedValue = value.toLowerCase()
+  if (normalizedValue === normalizedTerm) return 0
+  if (normalizedValue.startsWith(normalizedTerm)) return 1
+  return normalizedValue.includes(normalizedTerm) ? 2 : 3
+}
+
+function placementMatches(placement: PlacedElement, normalizedTerm: string): boolean {
+  return [
+    placement.name,
+    placement.kind,
+    placement.technology,
+    placement.file_path,
+    ...(placement.tags ?? []),
+  ]
+    .filter(Boolean)
+    .some((value) => String(value).toLowerCase().includes(normalizedTerm))
+}
+
+export function buildJumpSearchResults(term: string, flatTree: ViewTreeNode[], exploreData: ExploreData | null): JumpSearchResult[] {
+  const normalized = term.trim().toLowerCase()
+  if (normalized.length < 3) return []
+
+  const viewById = new Map(flatTree.map((node) => [node.id, node]))
+  const viewResults: JumpSearchResult[] = flatTree
+    .filter((node) => node.name.toLowerCase().includes(normalized))
+    .sort((a, b) => searchScore(a.name, normalized) - searchScore(b.name, normalized) || a.name.localeCompare(b.name))
+    .slice(0, 4)
+    .map((node) => ({
+      type: 'view',
+      key: `view:${node.id}`,
+      name: node.name,
+      viewId: node.id,
+      level: node.level,
+      levelLabel: node.level_label,
+    }))
+
+  const elementResults: JumpSearchResult[] = []
+  if (exploreData) {
+    Object.entries(exploreData.views ?? {}).forEach(([viewIdText, content]) => {
+      const viewId = Number(viewIdText)
+      if (!Number.isFinite(viewId)) return
+      const viewName = viewById.get(viewId)?.name ?? `View ${viewId}`
+      ;(content.placements ?? []).forEach((placement) => {
+        if (!placementMatches(placement, normalized)) return
+        elementResults.push({
+          type: 'element',
+          key: `element:${viewId}:${placement.element_id}`,
+          name: placement.name || `Element ${placement.element_id}`,
+          viewId,
+          viewName,
+          elementId: placement.element_id,
+          kind: placement.kind,
+        })
+      })
+    })
+  }
+
+  const dedupedElements = Array.from(
+    new Map(elementResults.map((result) => [result.key, result])).values(),
+  )
+    .sort((a, b) => searchScore(a.name, normalized) - searchScore(b.name, normalized) || a.name.localeCompare(b.name))
+    .slice(0, 6)
+
+  return [...viewResults, ...dedupedElements].slice(0, 8)
+}

package/src/store/useStore.ts

@@ -66,6 +66,7 @@ export type CanvasStoreState = ViewEditorUiState & {
   removeElementPlacement: (elementId: number) => void
   removeElementEverywhere: (elementId: number) => void
   mergeSavedElement: (saved: LibraryElement) => void
+  mergeElementsInto: (sourceId: number, survivor: LibraryElement) => void
   upsertConnector: (connector: Connector) => void
   replaceConnector: (connector: Connector) => void
   removeConnector: (connectorId: number) => void
@@ -254,6 +255,56 @@ export function removeConnectorFromList(connectors: Connector[], connectorId: nu
   return connectors.filter((connector) => connector.id !== connectorId)
 }
 
+export function reassignConnectorsToElement(connectors: Connector[], fromId: number, toId: number): Connector[] {
+  return connectors.map((c) => {
+    if (c.source_element_id === fromId && c.target_element_id === fromId) {
+      return { ...c, source_element_id: toId, target_element_id: toId }
+    }
+    if (c.source_element_id === fromId) {
+      return { ...c, source_element_id: toId }
+    }
+    if (c.target_element_id === fromId) {
+      return { ...c, target_element_id: toId }
+    }
+    return c
+  })
+}
+
+export function mergeElementReplacements(elements: PlacedElement[], sourceId: number, survivor: LibraryElement): PlacedElement[] {
+  const survivorId = survivor.id
+  const hasSurvivor = elements.some((el) => el.element_id === survivorId)
+  const sourcePlacement = elements.find((el) => el.element_id === sourceId)
+  if (hasSurvivor) {
+    return elements.filter((el) => el.element_id !== sourceId)
+  }
+  if (sourcePlacement) {
+    return elements.map((el) => {
+      if (el.element_id === sourceId) {
+        return {
+          ...el,
+          element_id: survivorId,
+          name: survivor.name,
+          kind: survivor.kind,
+          description: survivor.description,
+          technology: survivor.technology,
+          url: survivor.url,
+          logo_url: survivor.logo_url,
+          technology_connectors: survivor.technology_connectors,
+          tags: survivor.tags,
+          repo: survivor.repo,
+          branch: survivor.branch,
+          file_path: survivor.file_path,
+          language: survivor.language,
+          has_view: survivor.has_view,
+          view_label: survivor.view_label,
+        }
+      }
+      return el
+    })
+  }
+  return elements
+}
+
 export const useStore = create<CanvasStoreState>((set) => ({
   ...emptyViewEditorUiState,
   view: undefined,
@@ -305,6 +356,13 @@ export const useStore = create<CanvasStoreState>((set) => ({
     viewElements: mergeSavedElementIntoPlacements(state.viewElements, saved),
     allElements: state.allElements.map((el) => (el.id === saved.id ? saved : el)),
   })),
+  mergeElementsInto: (sourceId, survivor) => set((state) => ({
+    viewElements: mergeElementReplacements(state.viewElements, sourceId, survivor),
+    connectors: reassignConnectorsToElement(state.connectors, sourceId, survivor.id),
+    allElements: state.allElements
+      .filter((el) => el.id !== sourceId)
+      .map((el) => (el.id === survivor.id ? survivor : el)),
+  })),
   upsertConnector: (connector) => set((state) => ({
     connectors: upsertConnectorInList(state.connectors, connector),
   })),

package/src/types/index.ts

@@ -3,6 +3,7 @@ export interface TechnologyConnector {
   slug?: string
   label: string
   is_primary_icon?: boolean
+  isPrimaryIcon?: boolean
 }
 
 export interface TechnologyCatalogItem {
@@ -82,6 +83,15 @@ export interface PlacedElement {
   view_label: string | null
 }
 
+export interface VisibilityOverride {
+  view_id: number
+  resource_type: 'element' | 'connector'
+  resource_id: number
+  level_delta: number
+  created_at?: string
+  updated_at?: string
+}
+
 export interface NavigationConnector {
   id: number
   element_id: number | null

package/src/utils/elementIcon.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { resolveElementIconUrl } from './elementIcon'
+
+describe('resolveElementIconUrl', () => {
+  it('uses an explicit logo url before derived technology icons', () => {
+    expect(resolveElementIconUrl('/custom.svg', [
+      { type: 'catalog', slug: 'golang', label: 'Go', is_primary_icon: true },
+    ])).toBe('/custom.svg')
+  })
+
+  it('derives the selected catalog technology icon when logo_url is missing', () => {
+    expect(resolveElementIconUrl(null, [
+      { type: 'catalog', slug: 'golang', label: 'Go', is_primary_icon: true },
+    ])).toBe('/icons/golang.png')
+  })
+
+  it('falls back to the first catalog link when the API omits primary icon metadata', () => {
+    expect(resolveElementIconUrl(null, [
+      { type: 'catalog', slug: 'javascript', label: 'JavaScript' },
+    ])).toBe('/icons/javascript.png')
+  })
+
+  it('preserves explicit no-icon clears instead of falling back to technology', () => {
+    expect(resolveElementIconUrl('', [
+      { type: 'catalog', slug: 'golang', label: 'Go', is_primary_icon: true },
+    ])).toBeNull()
+  })
+})

package/src/utils/elementIcon.ts

@@ -0,0 +1,20 @@
+import type { TechnologyConnector } from '../types'
+import { resolveIconPath } from './url'
+
+export function resolveElementIconUrl(
+  logoUrl: string | null | undefined,
+  technologyConnectors: TechnologyConnector[] | null | undefined,
+): string | null {
+  if (logoUrl != null) {
+    return logoUrl === '' ? null : resolveIconPath(logoUrl)
+  }
+
+  const catalogLinks = technologyConnectors?.filter((link) => link.type === 'catalog' && !!link.slug) ?? []
+  const selected = catalogLinks.find((link) => (
+    link.type === 'catalog' &&
+    !!(link.is_primary_icon ?? link.isPrimaryIcon) &&
+    !!link.slug
+  )) ?? catalogLinks[0]
+  if (!selected?.slug) return null
+  return resolveIconPath(`/icons/${selected.slug}.png`)
+}

package/src/utils/sourceEditor.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import type { SourceEditor } from '../api/client'
+
+const SOURCE_EDITOR_KEY = 'diag:source-editor'
+const DEFAULT_SOURCE_EDITOR: SourceEditor = 'zed'
+
+function readSourceEditor(): SourceEditor {
+  if (typeof window === 'undefined') return DEFAULT_SOURCE_EDITOR
+  const stored = window.localStorage.getItem(SOURCE_EDITOR_KEY)
+  return stored === 'vscode' || stored === 'zed' ? stored : DEFAULT_SOURCE_EDITOR
+}
+
+export function getSourceEditor(): SourceEditor {
+  return readSourceEditor()
+}
+
+export function setSourceEditor(value: SourceEditor) {
+  window.localStorage.setItem(SOURCE_EDITOR_KEY, value)
+  window.dispatchEvent(new CustomEvent('diag:source-editor-change', { detail: value }))
+}
+
+export function useSourceEditor() {
+  const [editor, setEditorState] = useState<SourceEditor>(() => readSourceEditor())
+
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === SOURCE_EDITOR_KEY) {
+        setEditorState(readSourceEditor())
+      }
+    }
+    const handleChange = () => setEditorState(readSourceEditor())
+    window.addEventListener('storage', handleStorage)
+    window.addEventListener('diag:source-editor-change', handleChange)
+    return () => {
+      window.removeEventListener('storage', handleStorage)
+      window.removeEventListener('diag:source-editor-change', handleChange)
+    }
+  }, [])
+
+  const setEditor = (value: SourceEditor) => {
+    setSourceEditor(value)
+    setEditorState(value)
+  }
+
+  return { editor, setEditor }
+}

package/src/utils/watchDiffSummary.ts

@@ -0,0 +1,159 @@
+import type { Connector, ExploreData, ViewTreeNode } from '../types'
+import type { WatchDiff } from '../api/client'
+
+export type WatchChangeType = 'added' | 'updated' | 'deleted' | 'initialized'
+
+export interface WatchResourceStat {
+  added: number
+  updated: number
+  deleted: number
+  initialized: number
+  addedLines: number
+  removedLines: number
+}
+
+export interface WatchDiffLocation {
+  key: string
+  label: string
+  resourceType: string
+  resourceId?: number
+  changeType: WatchChangeType
+  summary?: string
+  addedLines: number
+  removedLines: number
+  viewId: number
+  viewName: string
+}
+
+export interface WatchDiffSummary {
+  files: WatchResourceStat
+  elements: WatchResourceStat
+  connectors: WatchResourceStat
+}
+
+export function normalizeWatchChangeType(value: string): WatchChangeType {
+  if (value === 'added' || value === 'updated' || value === 'deleted' || value === 'initialized') return value
+  return 'updated'
+}
+
+export function emptyWatchResourceStat(): WatchResourceStat {
+  return { added: 0, updated: 0, deleted: 0, initialized: 0, addedLines: 0, removedLines: 0 }
+}
+
+export function summarizeWatchDiffs(diffs: WatchDiff[] | null | undefined): WatchDiffSummary {
+  const summary = {
+    files: emptyWatchResourceStat(),
+    elements: emptyWatchResourceStat(),
+    connectors: emptyWatchResourceStat(),
+  }
+  ;(Array.isArray(diffs) ? diffs : []).forEach((diff) => {
+    const bucket =
+      diff.resource_type === 'file' || diff.owner_type === 'file'
+        ? summary.files
+        : diff.resource_type === 'element'
+          ? summary.elements
+          : diff.resource_type === 'connector'
+            ? summary.connectors
+            : null
+    if (!bucket) return
+    bucket[normalizeWatchChangeType(diff.change_type)] += 1
+    bucket.addedLines += Math.max(0, diff.added_lines ?? 0)
+    bucket.removedLines += Math.max(0, diff.removed_lines ?? 0)
+  })
+  return summary
+}
+
+export function formatStatLine(label: string, stat: WatchResourceStat): string {
+  const total = stat.added + stat.updated + stat.deleted + stat.initialized
+  const parts = [`${total} ${label}${total === 1 ? '' : 's'} changed`]
+  if (stat.addedLines > 0) parts.push(`+${stat.addedLines}`)
+  if (stat.removedLines > 0) parts.push(`-${stat.removedLines}`)
+  return parts.join(', ')
+}
+
+export function formatTldStatLine(summary: WatchDiffSummary): string {
+  return [
+    formatStatLine('element', summary.elements),
+    formatStatLine('connector', summary.connectors),
+  ].join(' · ')
+}
+
+function flattenViews(nodes: ViewTreeNode[], out = new Map<number, ViewTreeNode>()): Map<number, ViewTreeNode> {
+  nodes.forEach((node) => {
+    out.set(node.id, node)
+    flattenViews(node.children ?? [], out)
+  })
+  return out
+}
+
+function connectorName(connector: Connector): string {
+  return connector.label || connector.relationship || `connector ${connector.id}`
+}
+
+export function buildWatchDiffLocations(data: ExploreData, diffs: WatchDiff[] | null | undefined): WatchDiffLocation[] {
+  const views = flattenViews(data.tree ?? [])
+  const elementViews = new Map<number, WatchDiffLocation[]>()
+  const connectorViews = new Map<number, WatchDiffLocation>()
+
+  Object.entries(data.views ?? {}).forEach(([viewIdText, content]) => {
+    const viewId = Number(viewIdText)
+    if (!Number.isFinite(viewId)) return
+    const viewName = views.get(viewId)?.name ?? `View ${viewId}`
+    ;(content.placements ?? []).forEach((placement) => {
+      const list = elementViews.get(placement.element_id) ?? []
+      list.push({
+        key: `element:${placement.element_id}:${viewId}`,
+        label: placement.name || `element ${placement.element_id}`,
+        resourceType: 'element',
+        resourceId: placement.element_id,
+        changeType: 'updated',
+        addedLines: 0,
+        removedLines: 0,
+        viewId,
+        viewName,
+      })
+      elementViews.set(placement.element_id, list)
+    })
+    ;(content.connectors ?? []).forEach((connector) => {
+      connectorViews.set(connector.id, {
+        key: `connector:${connector.id}:${viewId}`,
+        label: connectorName(connector),
+        resourceType: 'connector',
+        resourceId: connector.id,
+        changeType: 'updated',
+        addedLines: 0,
+        removedLines: 0,
+        viewId,
+        viewName,
+      })
+    })
+  })
+
+  const locations: WatchDiffLocation[] = []
+  ;(Array.isArray(diffs) ? diffs : []).forEach((diff) => {
+    if (!diff.resource_id) return
+    const base = {
+      changeType: normalizeWatchChangeType(diff.change_type),
+      summary: diff.summary,
+      addedLines: Math.max(0, diff.added_lines ?? 0),
+      removedLines: Math.max(0, diff.removed_lines ?? 0),
+    }
+    if (diff.resource_type === 'element') {
+      ;(elementViews.get(diff.resource_id) ?? []).forEach((location) => {
+        locations.push({ ...location, ...base })
+      })
+    }
+    if (diff.resource_type === 'connector') {
+      const location = connectorViews.get(diff.resource_id)
+      if (location) locations.push({ ...location, ...base })
+    }
+  })
+
+  const seen = new Set<string>()
+  return locations.filter((location) => {
+    const key = `${location.resourceType}:${location.resourceId}:${location.viewId}`
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}