@tldiagram/core-ui 1.94.0 → 1.94.2

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

@@ -56,8 +56,6 @@ export declare function useViewData({ viewId, interactionSourceId, clickConnectM
     incomingLinks: import("../../..").IncomingViewConnector[];
     treeData: ViewTreeNode[];
     allElements: LibraryElement[];
-    libraryRefresh: number;
-    setLibraryRefresh: (next: import("../../../store/useStore").StoreSetter<number>) => void;
     existingElementIds: Set<number>;
     viewElementsRef: import("react").MutableRefObject<PlacedElement[]>;
     linksMapRef: import("react").MutableRefObject<Record<number, import("../../..").ViewConnector[]>>;

package/dist/store/useStore.d.ts

@@ -32,7 +32,6 @@ export type CanvasStoreState = ViewEditorUiState & {
     incomingLinks: IncomingViewConnector[];
     treeData: ViewTreeNode[];
     allElements: LibraryElement[];
-    libraryRefresh: number;
     setViewEditorUi: (patch: Partial<ViewEditorUiState>) => void;
     setSnapToGrid: (snapToGrid: boolean) => void;
     setSelectedElement: (selectedElement: LibraryElement | null) => void;
@@ -47,7 +46,6 @@ export type CanvasStoreState = ViewEditorUiState & {
     setIncomingLinks: (next: StoreSetter<IncomingViewConnector[]>) => void;
     setTreeData: (next: StoreSetter<ViewTreeNode[]>) => void;
     setAllElements: (next: StoreSetter<LibraryElement[]>) => void;
-    setLibraryRefresh: (next: StoreSetter<number>) => void;
     resetCanvas: () => void;
     hydrateViewContent: (payload: ViewContentPayload) => void;
     updateElementPosition: (elementId: number, x: number, y: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.94.0",
+  "version": "1.94.2",
   "type": "module",
   "repository": {
     "type": "git",
@@ -38,7 +38,6 @@
   "dependencies": {
     "@buf/tldiagramcom_diagram.bufbuild_es": "^2.11.0-20260419172603-8192c519478e.1",
     "@bufbuild/protobuf": "^2.11.0",
-    "@tanstack/react-query": "^5.100.1",
     "esbuild": "^0.25.12",
     "zustand": "^5.0.12"
   },
@@ -59,6 +58,7 @@
     "@connectrpc/connect-web": "^2.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@tanstack/react-query": "^5.100.1",
     "@uiw/react-codemirror": "^4.25.8",
     "d3-force": "^3.0.0",
     "dagre": "^0.8.5",
@@ -126,6 +126,7 @@
     "@connectrpc/connect-web": "^2.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@tanstack/react-query": "^5.100.1",
     "@eslint/js": "^9.0.0",
     "@types/dagre": "^0.7.54",
     "@types/react": "^18.3.12",

package/src/api/client.ts

@@ -134,41 +134,51 @@ function protoElementToLibrary(e: Record<string, unknown>): LibraryElement {
     description: (e.description ?? null) as string | null,
     technology: (e.technology ?? null) as string | null,
     url: (e.url ?? null) as string | null,
-    logo_url: (e.logo_url ?? null) as string | null,
-    technology_connectors: (e.technology_connectors ?? []) as LibraryElement['technology_connectors'],
+    logo_url: (e.logo_url ?? e.logoUrl ?? null) as string | null,
+    technology_connectors: ((e.technology_connectors ?? e.technologyLinks ?? []) as any[]).map(tl => ({
+      type: tl.type,
+      slug: tl.slug,
+      label: tl.label,
+      is_primary_icon: !!(tl.is_primary_icon ?? tl.isPrimaryIcon),
+    })),
     tags: (e.tags ?? []) as string[],
     repo: (e.repo ?? null) as string | null,
     branch: (e.branch ?? null) as string | null,
     file_path: (e.file_path ?? null) as string | null,
     language: (e.language ?? null) as string | null,
-    created_at: String(e.created_at ?? new Date().toISOString()),
-    updated_at: String(e.updated_at ?? new Date().toISOString()),
-    has_view: Boolean(e.has_view ?? false),
-    view_label: (e.view_label ?? null) as string | null,
+    created_at: String(e.created_at ?? e.createdAt ?? new Date().toISOString()),
+    updated_at: String(e.updated_at ?? e.updatedAt ?? new Date().toISOString()),
+    has_view: Boolean(e.has_view ?? e.hasView ?? false),
+    view_label: (e.view_label ?? e.viewLabel ?? null) as string | null,
   }
 }
 
 function protoPlacedElement(p: Record<string, unknown>): PlacedElement {
   return {
     id: Number(p.id ?? 0),
-    view_id: Number(p.view_id ?? 0),
-    element_id: Number(p.element_id ?? 0),
-    position_x: Number(p.position_x ?? 0),
-    position_y: Number(p.position_y ?? 0),
+    view_id: Number(p.view_id ?? p.viewId ?? 0),
+    element_id: Number(p.element_id ?? p.elementId ?? 0),
+    position_x: Number(p.position_x ?? p.positionX ?? 0),
+    position_y: Number(p.position_y ?? p.positionY ?? 0),
     name: String(p.name ?? ''),
     description: (p.description ?? null) as string | null,
     kind: (p.kind ?? null) as string | null,
     technology: (p.technology ?? null) as string | null,
     url: (p.url ?? null) as string | null,
-    logo_url: (p.logo_url ?? null) as string | null,
-    technology_connectors: (p.technology_connectors ?? []) as PlacedElement['technology_connectors'],
+    logo_url: (p.logo_url ?? p.logoUrl ?? null) as string | null,
+    technology_connectors: ((p.technology_connect_ors ?? p.technology_connectors ?? p.technologyLinks ?? []) as any[]).map(tl => ({
+      type: tl.type,
+      slug: tl.slug,
+      label: tl.label,
+      is_primary_icon: !!(tl.is_primary_icon ?? tl.isPrimaryIcon),
+    })),
     tags: (p.tags ?? []) as string[],
     repo: (p.repo ?? null) as string | null,
     branch: (p.branch ?? null) as string | null,
     file_path: (p.file_path ?? null) as string | null,
     language: (p.language ?? null) as string | null,
-    has_view: Boolean(p.has_view ?? false),
-    view_label: (p.view_label ?? null) as string | null,
+    has_view: Boolean(p.has_view ?? p.hasView ?? false),
+    view_label: (p.view_label ?? p.viewLabel ?? null) as string | null,
   }
 }
 

package/src/components/ContextNeighborElement.tsx

@@ -62,7 +62,7 @@ function ContextNeighborNode({ data }: Props) {
 
   const logoUrl = useMemo(() => {
     if (data.logo_url) return resolveIconPath(data.logo_url)
-    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
+    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
     if (!selected?.slug) return undefined
     return resolveIconPath(`/icons/${selected.slug}.png`)
   }, [data.logo_url, data.technology_connectors])

package/src/components/ElementLibrary.tsx

@@ -34,7 +34,6 @@ interface Props {
   existingElementIds: Set<number>
   existingElements?: LibraryElement[]
   onCreateNew: () => void
-  refresh: number
   isOpen: boolean
   onClose: () => void
   onTapAdd?: (obj: LibraryElement) => void
@@ -89,7 +88,6 @@ function ElementLibrary({
   existingElementIds,
   existingElements = [],
   onCreateNew,
-  refresh,
   isOpen,
   onClose,
   onTapAdd,
@@ -134,7 +132,7 @@ function ElementLibrary({
     if (isOpen) {
       fetchElements(0, searchRef.current, true)
     }
-  }, [isOpen, refresh, fetchElements])
+  }, [isOpen, fetchElements])
 
   // Debounced search
   useEffect(() => {

package/src/components/ElementNode.tsx

@@ -317,7 +317,7 @@ function ElementNode({ data, selected }: Props) {
   }, [data.reconnectCandidates])
 
   const derivedPrimaryIconPath = (() => {
-    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
+    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
     if (!selected?.slug) return undefined
     return resolveIconPath(`/icons/${selected.slug}.png`)
   })()

package/src/components/ElementPanel.tsx

@@ -18,8 +18,6 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-  Radio,
-  RadioGroup,
   Tag,
   TagCloseButton,
   TagLabel,
@@ -45,6 +43,173 @@ import TagUpsert from './TagUpsert'
 
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 
+function normalizeTechnologyLabel(value: string): string {
+  return value.trim().replace(/\s+/g, ' ').toLowerCase()
+}
+
+function splitTechnologyLabel(value: string): string[] {
+  return value.split(',').map((part) => part.trim()).filter(Boolean)
+}
+
+function findCatalogItemByLabel(index: Awaited<ReturnType<typeof getTechnologyCatalogIndex>>, label: string): TechnologyCatalogItem | null {
+  const normalized = normalizeTechnologyLabel(label)
+  if (!normalized) return null
+
+  const bySlugMatch = index.bySlug.get(label.trim())
+  if (bySlugMatch) return bySlugMatch
+
+  return index.items.find((item) => (
+    normalizeTechnologyLabel(item.name) === normalized ||
+    normalizeTechnologyLabel(item.nameShort) === normalized ||
+    normalizeTechnologyLabel(item.defaultSlug) === normalized
+  )) ?? null
+}
+
+function dedupeTechnologyLinks(links: TechnologyConnector[]): TechnologyConnector[] {
+  const seenCatalog = new Set<string>()
+  const seenCustom = new Set<string>()
+  const result: TechnologyConnector[] = []
+  let primarySet = false
+
+  // Sort links to process primary ones first, ensuring they are preserved during deduping
+  const sortedLinks = [...links].sort((a, b) => {
+    const aPrimary = !!(a.is_primary_icon ?? (a as any).isPrimaryIcon)
+    const bPrimary = !!(b.is_primary_icon ?? (b as any).isPrimaryIcon)
+    if (aPrimary && !bPrimary) return -1
+    if (!aPrimary && bPrimary) return 1
+    return 0
+  })
+
+  for (const link of sortedLinks) {
+    const label = link.label.trim()
+    if (!label) continue
+
+    const isPrimary = !!(link.is_primary_icon ?? (link as any).isPrimaryIcon)
+
+    if (link.type === 'catalog' && link.slug) {
+      const slug = link.slug.trim()
+      const key = slug.toLowerCase()
+      if (seenCatalog.has(key)) continue
+      seenCatalog.add(key)
+      result.push({
+        type: 'catalog',
+        slug,
+        label,
+        is_primary_icon: !primarySet && isPrimary,
+      })
+      if (isPrimary) primarySet = true
+      continue
+    }
+
+    const key = normalizeTechnologyLabel(label)
+    if (seenCustom.has(key)) continue
+    seenCustom.add(key)
+    result.push({ type: 'custom', label, is_primary_icon: false })
+  }
+
+  return result.slice(0, 3)
+}
+
+async function normalizeInitialTechnologyLinks(element: LibraryElement): Promise<TechnologyConnector[]> {
+  const rawLinks = element.technology_connectors ?? []
+  const legacyLabels = splitTechnologyLabel(element.technology ?? '')
+
+  if (rawLinks.length === 0 && legacyLabels.length === 0) return []
+
+  const index = await getTechnologyCatalogIndex()
+  const normalized: TechnologyConnector[] = []
+
+  const pushLabel = (label: string, isPrimaryIcon = false) => {
+    const match = findCatalogItemByLabel(index, label)
+    if (match) {
+      normalized.push({
+        type: 'catalog',
+        slug: match.defaultSlug,
+        label: match.name,
+        is_primary_icon: isPrimaryIcon,
+      })
+    } else {
+      normalized.push({ type: 'custom', label: label.trim(), is_primary_icon: false })
+    }
+  }
+
+  if (rawLinks.length > 0) {
+    for (const link of rawLinks) {
+      if (link.type === 'catalog') {
+        const match = link.slug ? index.bySlug.get(link.slug) : null
+        normalized.push({
+          type: 'catalog',
+          slug: link.slug,
+          label: match?.name ?? link.label,
+          is_primary_icon: !!(link.is_primary_icon ?? (link as any).isPrimaryIcon),
+        })
+      } else {
+        const parts = splitTechnologyLabel(link.label)
+        if (parts.length > 1) {
+          for (const part of parts) pushLabel(part)
+        } else {
+          pushLabel(link.label)
+        }
+      }
+    }
+  } else {
+    for (const label of legacyLabels) {
+      pushLabel(label)
+    }
+  }
+
+  // If no catalog item is primary, try to match against element.logo_url or fallback to first catalog item
+  const deduped = dedupeTechnologyLinks(normalized)
+  const hasPrimary = deduped.some(l => l.type === 'catalog' && l.is_primary_icon)
+  if (!hasPrimary) {
+    let bestMatchIndex = -1
+    if (element.logo_url) {
+      bestMatchIndex = deduped.findIndex(l => l.type === 'catalog' && l.slug && element.logo_url?.toLowerCase().includes(l.slug.toLowerCase()))
+    }
+
+    if (bestMatchIndex !== -1) {
+      deduped[bestMatchIndex].is_primary_icon = true
+    } else {
+      const firstCatalog = deduped.find(l => l.type === 'catalog')
+      if (firstCatalog) {
+        firstCatalog.is_primary_icon = true
+      }
+    }
+  }
+
+  return deduped
+}
+
+function buildTechnologyFingerprintPayload(
+  element: LibraryElement,
+  links: TechnologyConnector[],
+  type: string,
+) {
+  const normalizedLinks = links.map((link) => ({
+    type: link.type,
+    slug: link.type === 'catalog' ? link.slug : undefined,
+    label: link.label,
+    is_primary_icon: !!link.is_primary_icon,
+  }))
+  const normalizedType = type.trim().toLowerCase()
+  const technology = links.map((link) => link.label).join(', ')
+
+  return {
+    name: element.name,
+    description: element.description ?? '',
+    kind: normalizedType,
+    technology,
+    url: element.url ?? '',
+    logo_url: element.logo_url ?? '',
+    technology_connectors: normalizedLinks,
+    tags: element.tags ?? [],
+    repo: element.repo,
+    branch: element.branch,
+    file_path: element.file_path,
+    language: element.language,
+  }
+}
+
 export interface ElementPanelProps extends ElementPanelSlots {
   isOpen: boolean
   onClose: () => void
@@ -101,6 +266,8 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   }, [technologyQuery])
 
   useEffect(() => {
+    let cancelled = false
+
     if (element) {
       setName(element.name)
       setDescription(element.description ?? '')
@@ -108,43 +275,42 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
       setTypeQuery('')
       setTypeResults([])
       setUrl(element.url ?? '')
-      const linksFromElement = element.technology_connectors ?? []
-      if (linksFromElement.length > 0) {
-        setTechnologyConnectors(linksFromElement)
-      } else if (element.technology) {
-        setTechnologyConnectors([{ type: 'custom', label: element.technology }])
-      } else {
-        setTechnologyConnectors([])
-      }
       setTags(element.tags ?? [])
       setExplicitLogoClear(false)
 
-      // Initialize autosave fingerprint based on a payload normalized the same way as saves.
-      const initialLinks: TechnologyConnector[] = linksFromElement.length > 0
-        ? linksFromElement
-        : (element.technology ? [{ type: 'custom', label: element.technology }] : [])
-      const normalizedLinks = initialLinks.map((link) => ({
-        type: link.type,
-        slug: link.type === 'catalog' ? link.slug : undefined,
-        label: link.label,
-        is_primary_icon: !!link.is_primary_icon,
+      const linksFromElement = (element.technology_connectors ?? []).map(tl => ({
+        ...tl,
+        is_primary_icon: !!(tl.is_primary_icon ?? (tl as any).isPrimaryIcon),
       }))
-      const normalizedType = (element.kind ?? '').trim().toLowerCase()
-      const technology = initialLinks.map((link) => link.label).join(', ')
-      lastSavedFingerprintRef.current = JSON.stringify({
-        name: element.name,
-        description: element.description ?? '',
-        kind: normalizedType,
-        technology,
-        url: element.url ?? '',
-        logo_url: element.logo_url ?? '',
-        technology_connectors: normalizedLinks,
-        tags: element.tags ?? [],
-        repo: element.repo,
-        branch: element.branch,
-        file_path: element.file_path,
-        language: element.language,
-      })
+      const fallbackLinks: TechnologyConnector[] = linksFromElement.length > 0
+        ? linksFromElement
+        : (element.technology ? [{ type: 'custom', label: element.technology, is_primary_icon: false }] : [])
+      setTechnologyConnectors(fallbackLinks)
+      lastSavedFingerprintRef.current = JSON.stringify(buildTechnologyFingerprintPayload(
+        element,
+        fallbackLinks,
+        element.kind ?? '',
+      ))
+
+      normalizeInitialTechnologyLinks(element)
+        .then((initialLinks) => {
+          if (cancelled) return
+          setTechnologyConnectors(initialLinks)
+          lastSavedFingerprintRef.current = JSON.stringify(buildTechnologyFingerprintPayload(
+            element,
+            initialLinks,
+            element.kind ?? '',
+          ))
+        })
+        .catch(() => {
+          if (cancelled) return
+          setTechnologyConnectors(fallbackLinks)
+          lastSavedFingerprintRef.current = JSON.stringify(buildTechnologyFingerprintPayload(
+            element,
+            fallbackLinks,
+            element.kind ?? '',
+          ))
+        })
     } else {
       setName('')
       setDescription('')
@@ -160,17 +326,21 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
       setExplicitLogoClear(false)
       lastSavedFingerprintRef.current = ''
     }
+
+    return () => {
+      cancelled = true
+    }
   }, [element, isOpen])
 
   const buildPayloadAndFingerprint = useCallback(async () => {
-    const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && link.is_primary_icon && link.slug)
+    const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && link.slug)
     const primarySlug = primaryLink?.slug
 
     const normalizedLinks = technologyLinks.map((link) => ({
       type: link.type,
       slug: link.type === 'catalog' ? link.slug : undefined,
       label: link.label,
-      is_primary_icon: !!link.is_primary_icon,
+      is_primary_icon: !!(link.is_primary_icon ?? (link as any).isPrimaryIcon),
     }))
 
     const normalizedType = type.trim().toLowerCase()
@@ -179,7 +349,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     if (explicitLogoClear) {
       logoUrl = ''
     }
-    if (primarySlug) {
+    if (!explicitLogoClear && primarySlug) {
       const cached = technologyMeta[primarySlug]
       if (cached?.iconUrl) {
         logoUrl = cached.iconUrl
@@ -378,43 +548,31 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   }
 
   const removeTechnology = (linkToRemove: TechnologyConnector) => {
-    setTechnologyConnectors((prev) => {
-      const next = prev.filter((link) => !(link.type === linkToRemove.type && link.slug === linkToRemove.slug && link.label === linkToRemove.label))
-      const hasPrimaryCatalog = next.some((link) => link.type === 'catalog' && !!link.is_primary_icon)
-      if (hasPrimaryCatalog) return next
-
-      const firstCatalogIndex = next.findIndex((link) => link.type === 'catalog' && !!link.slug)
-      if (firstCatalogIndex === -1) return next
-
-      return next.map((link, index) => ({
-        ...link,
-        is_primary_icon: index === firstCatalogIndex,
-      }))
-    })
+    if (linkToRemove.type === 'catalog' && linkToRemove.is_primary_icon) {
+      setExplicitLogoClear(true)
+    }
+    setTechnologyConnectors((prev) => prev.filter((link) => (
+      !(link.type === linkToRemove.type && link.slug === linkToRemove.slug && link.label === linkToRemove.label)
+    )))
     scheduleAutoSave()
   }
 
-  const markPrimaryIcon = (selectedSlug: string) => {
+  const togglePrimaryIcon = (selectedSlug: string) => {
+    const isDeselecting = selectedPrimarySlug === selectedSlug
     setTechnologyConnectors((prev) => prev.map((link) => {
       if (link.type !== 'catalog') {
         return { ...link, is_primary_icon: false }
       }
       return {
         ...link,
-        is_primary_icon: link.slug === selectedSlug,
+        is_primary_icon: !isDeselecting && link.slug === selectedSlug,
       }
     }))
-    setExplicitLogoClear(false)
+    setExplicitLogoClear(isDeselecting)
     scheduleAutoSave()
   }
 
-  const clearPrimaryIcon = () => {
-    setTechnologyConnectors((prev) => prev.map((link) => ({ ...link, is_primary_icon: false })))
-    setExplicitLogoClear(true)
-    scheduleAutoSave()
-  }
-
-  const selectedPrimarySlug = technologyLinks.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)?.slug ?? ''
+  const selectedPrimarySlug = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)?.slug ?? ''
 
   const commitTypeFromQuery = () => {
     if (isReadOnly) return
@@ -437,7 +595,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     if (isReadOnly || !name.trim()) return
     setLoading(true)
     try {
-      const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && link.is_primary_icon && link.slug)
+      const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && link.slug)
       const primaryMetadata = primaryLink?.slug
         ? (technologyMeta[primaryLink.slug] ?? await getTechnologyCatalogItemBySlug(primaryLink.slug))
         : null
@@ -446,7 +604,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
         type: link.type,
         slug: link.type === 'catalog' ? link.slug : undefined,
         label: link.label,
-        is_primary_icon: !!link.is_primary_icon,
+        is_primary_icon: !!(link.is_primary_icon ?? (link as any).isPrimaryIcon),
       }))
 
       const normalizedType = type.trim().toLowerCase()
@@ -457,7 +615,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
         kind: normalizedType,
         technology: technologyLinks.map((link) => link.label).join(', '),
         url,
-        logo_url: primaryMetadata?.iconUrl ?? '',
+        logo_url: explicitLogoClear ? '' : (primaryMetadata?.iconUrl ?? ''),
         technology_connectors: normalizedLinks,
         tags,
         repo: element?.repo,
@@ -703,11 +861,24 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
                   {technologyLinks.map((link) => {
                     const meta = link.slug ? technologyMeta[link.slug] : undefined
                     const sourceUrl = meta?.websiteUrl || meta?.docsUrl
+                    const isSelectable = link.type === 'catalog' && !!link.slug && !isReadOnly
+                    const isPrimaryIcon = link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug
                     return (
                       <WrapItem key={`${link.type}:${link.slug ?? link.label}`}>
                         <Popover trigger={isMobile ? 'click' : 'hover'} placement="top" closeOnBlur>
                           <PopoverTrigger>
-                            <Tag size="sm" variant="subtle" bg="whiteAlpha.100" border="1px solid" borderColor="whiteAlpha.200" cursor="pointer">
+                            <Tag
+                              size="sm"
+                              variant="subtle"
+                              bg={isPrimaryIcon ? 'blue.500' : 'whiteAlpha.100'}
+                              border="1px solid"
+                              borderColor={isPrimaryIcon ? 'blue.300' : 'whiteAlpha.200'}
+                              color={isPrimaryIcon ? 'white' : undefined}
+                              cursor={isSelectable ? 'pointer' : 'default'}
+                              onClick={() => {
+                                if (isSelectable && link.slug) togglePrimaryIcon(link.slug)
+                              }}
+                            >
                               <TagLabel color="white">
                                 {link.type === 'catalog' && meta && (
                                   <Box as="img" src={resolveWithBase(meta.iconUrl)} alt={link.label} boxSize="12px" objectFit="contain" display="inline-block" mr={1.5} verticalAlign="middle" />
@@ -715,7 +886,13 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
                                 {link.label}
                               </TagLabel>
                               {!isReadOnly && (
-                                <TagCloseButton onClick={() => removeTechnology(link)} />
+                                <TagCloseButton
+                                  onClick={(e) => {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                    removeTechnology(link)
+                                  }}
+                                />
                               )}
                             </Tag>
                           </PopoverTrigger>
@@ -739,28 +916,6 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
                   })}
                 </Wrap>
 
-                <VStack align="stretch" spacing={1}>
-                  <Text fontSize="xs" color="gray.400">Canvas icon (optional)</Text>
-                  <Button size="xs" variant="ghost" w="fit-content" onClick={clearPrimaryIcon} isDisabled={isReadOnly}>
-                    None
-                  </Button>
-                  <RadioGroup value={selectedPrimarySlug} onChange={markPrimaryIcon}>
-                    <VStack align="stretch" spacing={1}>
-                      {technologyLinks.filter((link) => link.type === 'catalog' && !!link.slug).map((link) => (
-                        <Radio
-                          key={`primary-${link.slug}`}
-                          value={link.slug}
-                          isDisabled={isReadOnly}
-                          size="sm"
-                          colorScheme="blue"
-                        >
-                          <Text fontSize="xs" color="gray.200">{link.label}</Text>
-                        </Radio>
-                      ))}
-                    </VStack>
-                  </RadioGroup>
-                </VStack>
-
                 <Text fontSize="10px" color="gray.500">Maximum 3 linked technologies.</Text>
               </VStack>
             </FormControl>

package/src/components/Icons.tsx

@@ -5,9 +5,7 @@ export function ZoomOutIcon({ size = 14, strokeWidth = 3 }: { size?: number, str
   return (
     <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="8" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      <line x1="8" y1="11" x2="14" y2="11" />
+      <path d="M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0M21 21l-4.343-4.343M8 11h6" />
     </svg>
   )
 }
@@ -16,10 +14,7 @@ export function ZoomInIcon({ size = 14, strokeWidth = 3 }: { size?: number, stro
   return (
     <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="8" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      <line x1="11" y1="8" x2="11" y2="14" />
-      <line x1="8" y1="11" x2="14" y2="11" />
+      <path d="M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0M21 21l-4.343-4.343M11 8v6M8 11h6" />
     </svg>
   )
 }

package/src/components/ZUI/layout.ts

@@ -168,7 +168,7 @@ function buildNodes(
       }))
 
     const derivedPrimaryIconPath = (() => {
-      const selected = obj.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
+      const selected = obj.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
       if (!selected?.slug) return null
       return resolveIconPath(`/icons/${selected.slug}.png`)
     })()